HTMLInputElement: showPicker() 方法
Baseline 广泛可用 *
HTMLInputElement.showPicker() 方法会显示浏览器为 input 元素提供的选择器。
这与元素被选中时通常会显示的同一个选择器，但可以从按钮点击或其他用户交互中触发。
浏览器通常会为以下类型的输入实现此功能："date"、"month"、"week"、"time"、"datetime-local"、"color" 或 "file"。它还可以预填充来自 <datalist> 元素或 autocomplete 属性的项目。
更广泛地说，此方法理想情况下应该显示平台任何具有选择器的输入元素的选择器。
语法
showPicker()
参数
无。
返回值
无（undefined）。
异常
InvalidStateErrorDOMException-
如果元素不可变，则会抛出此异常，这意味着用户无法修改它和/或无法自动预填充它。
NotAllowedErrorDOMException-
如果不是由用户操作（例如触摸手势或鼠标点击）明确触发，则会抛出此异常（选择器需要 瞬时激活）。
SecurityErrorDOMException-
如果在跨域 iframe 中调用，则会抛出此异常，文件和颜色选择器除外（出于历史原因豁免）。
安全
需要瞬时用户激活。用户必须与页面或 UI 元素进行交互才能使此功能正常工作。
示例
特性检测
下面的代码显示了如何检查 showPicker() 是否受支持
if ("showPicker" in HTMLInputElement.prototype) {
// showPicker() is supported.
}
普通输入选择器
此示例展示了此功能如何用于 color 和 file 输入选择器。
注意： date、datetime-local、month、time、week 的选择器以相同方式启动。此处无法显示它们，因为实时示例在跨域框架中运行，并且会引起 SecurityError。
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()。
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => {
const input = event.srcElement.previousElementSibling;
try {
input.showPicker();
} catch (error) {
console.log(error);
}
});
});
结果
点击每个输入类型旁边的按钮以显示其选择器。
datalist 输入的 showPicker()
showPicker() 可以启动在 <datalist> 中定义的选项列表的选择器。
首先，我们在 HTML 中定义一个包含多个互联网浏览器的 <datalist>，一个使用它的 text 类型输入，以及一个按钮。
<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()。
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”的 autocomplete 选项的输入。
<input autocomplete="name" /> <button>Show autocomplete options</button>
下面的代码显示当按钮被点击时，输入的选择器。
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 |
浏览器兼容性
加载中…