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 |
瀏覽器相容性
載入中…