此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
HTMLInputElement.showPicker()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.
* Some parts of this feature may have varying levels of support.
HTMLInputElement.showPicker() 方法为input 元素展示浏览器的默认选择器（picker）。
这与选择元素时通常展示的选择器相同，但是它可以由按钮或者用户交互触发。
通常地，浏览器为这些类型的 input 实现此方法："date"、"month"、"week"、"time"、"datetime-local"、"color" 或"file"。它也可以预填充来自<datalist> 元素或者autocomplete 属性的项目。
更一般地说，这种方法完美地展示了平台上任何具有选择器的 input 元素的选择器。
语法
showPicker()参数
无。
返回值
无（undefined）。
异常
InvalidStateErrorDOMException如果元素不可变，则抛出，这意味着用户不能修改它和/或无法自动预填充它。
NotAllowedErrorDOMException如果不是由触摸手势或者鼠标点击等显示触发（选择器需要瞬态激活），则抛出。
SecurityErrorDOMException如果在跨域 iframe 中调用，则抛出，除了文件和颜色选择器（由于历史原因豁免）。
安全性
瞬态用户激活是需要的。用户必须与页面或者 UI 元素交互，才能使这个功能按顺序工作。
示例
功能检测
以下代码展示了如何检查showPicker() 是否被支持：
if ("showPicker" in HTMLInputElement.prototype) { // showPicker() is supported.}正常的 input 选择器
这个示例展示了如何将这个功能用于color 和file 的 input 选择器。
备注：date、datetime-local、month、time、week 的选择器以同样的方式启动。它们并不能在这里展示，因为在线示例运行在一个跨域 frame 中，并且会导致SecurityError。
HTML
<p> <input type="color" /> <button>Show the color picker</button></p><p> <input type="file" /> <button>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) { window.alert(error); } });});结果
单击每个 input 类型旁边的按钮以显示其选择器。
showPicker() 用于 datalist input
showPicker() 可以启动定义在<datalist> 列表中选项的选择器。
首先，我们在 HTML 中定一个了<datalist>，它由许多互联网浏览器、使用类型为text 的 input 和 一个按钮组成。
<datalist> <option value="Chrome"></option> <option value="Firefox"></option> <option value="Internet Explorer"></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 }});showPicker() 用于 autocomplete
showPicker() 可以为一个autocomplete input 开启选择器。
这里，我们定义了一个 input，其采用了 autocomplete 为“name”的选项。
<input autocomplete="name" /> <button>Show autocomplete options</button>以下代码展示了当按钮被点击时，input 展示的选择器。
const button = document.querySelector("button");const browserInput = document.querySelector("input");button.addEventListener("click", () => { try { browserInput.showPicker(); } catch (error) { // Fall back to another picker mechanism }});规范
| Specification |
|---|
| HTML # dom-input-showpicker |