HTMLInputElement: showPicker() 方法

HTMLInputElement.showPicker() 方法显示 input 元素的浏览器选择器。

这与通常在选择元素时显示的选择器相同，但可以从按钮按下或其他用户交互中触发。

通常，浏览器会针对以下类型的输入实现它："date"、"month"、"week"、"time"、"datetime-local"、"color" 或 "file"。它也可以预先填充来自 <datalist> 元素或 autocomplete 属性的项目。

更一般地说，此方法理想情况下应显示平台上任何具有选择器的输入元素的选择器。

语法

js
showPicker()

参数

无。

返回值

无 (undefined).

异常

InvalidStateError DOMException

如果元素不可变，则抛出此异常，这意味着用户无法修改它，或者它无法自动预填充。

NotAllowedError DOMException

如果未由用户操作（例如触摸手势或鼠标点击）显式触发，则抛出此异常（选择器需要 瞬时激活）。

SecurityError DOMException

如果在跨域 iframe 中调用，则抛出此异常，但文件和颜色选择器除外（出于历史原因免除）。

安全

瞬时用户激活 是必需的。用户必须与页面或 UI 元素交互，此功能才能正常工作。

示例

功能检测

以下代码展示了如何检查是否支持 showPicker()

js
if ("showPicker" in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

正常输入选择器

此示例展示了如何将此功能用于 color 和 file 输入选择器。

注意：date、datetime-local、month、time、week 的选择器以相同方式启动。它们无法在此处显示，因为实时示例在跨域框架中运行，并且会导致 SecurityError

HTML

html
<p>
  <input type="color" />
  <button id="color">Show the color picker</button>
</p>

<p>
  <input type="file" />
  <button id="file">Show the file picker</button>
</p>

JavaScript

代码只是获取所选按钮的前一个元素，并对其调用 showPicker()。

js
document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    const input = event.srcElement.previousElementSibling;
    try {
      input.showPicker();
    } catch (error) {
      window.alert(error);
    }
  });
});

结果

单击每个输入类型旁边的按钮以显示其选择器。

datalist 输入的 showPicker()

showPicker() 可以为 <datalist> 中定义的选项列表启动选择器。

首先，我们在 HTML 中定义一个 <datalist>，其中包含一些互联网浏览器，一个使用它的类型为 text 的输入以及一个按钮。

html
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

<input type="text" list="browsers" />
<button>Select browser</button>

以下代码添加了一个事件监听器，在单击按钮时调用 showPicker()。

js
const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

autocomplete 的 showPicker()

showPicker() 可以为 autocomplete 输入启动选择器。

这里我们定义了一个输入，它采用 "name" 的自动完成选项。

html
<input autocomplete="name" /> <button>Show autocomplete options</button>

以下代码在单击按钮时显示输入的选择器。

js
const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

规范

规范
HTML 标准
# dom-input-showpicker

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参见