HTMLSelectElement: showPicker() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
HTMLSelectElement.showPicker()
メソッドは、select
要素のブラウザーピッカーを表示します。
これは、通常、要素が選択された際に表示されるものと同じピッカーですが、ボタンを押すなど、他のユーザー操作から発生します。
構文
showPicker()
引数
なし。
返値
なし (undefined
)。
例外
InvalidStateError
DOMException
-
要素が変更可能なものでない場合に発生します。つまり、ユーザーが変更できない、あるいは自動的に事前入力できないということです。
NotAllowedError
DOMException
-
ユーザー操作(タッチジェスチャーやマウスクリックなど)によって明示的に開始されない場合、発生します(ピッカーには一時的な有効かが要求されます)。
NotSupportedError
DOMException
-
ピッカーに関連付けられた要素がレンダリングされていない場合に発生します。
SecurityError
DOMException
-
オリジンをまたいで iframe で呼び出された場合に発生します。
セキュリティの注意事項
一時的なユーザーの活性化が要求されます。 この機能が動作するには、ユーザーがページまたはUIの要素と対話する必要があります。
このメソッドは、同一オリジン iframe でのみ呼び出すことができます。別オリジンの iframe で呼び出された場合は例外が発生します。
例
機能検出
下記コードは、showPicker()
が対応しているかどうかを調べる方法を示しています。
if ("showPicker" in HTMLSelectElement.prototype) {
// showPicker() is supported.
}
ピッカーの起動
この例では、ボタンを使用して、2 つのオプションを持つ <select>
要素のピッカーを起動する方法を示しています。
HTML
<p>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button">Show Picker</button>
</p>
JavaScript
コードは <button>
を取得し、その click
イベントの待ち受けを追加します。
イベントハンドラーは <select>
要素を取得し、その showPicker()
を呼び出します。
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
const select = event.srcElement.previousElementSibling;
try {
select.showPicker();
} catch (error) {
window.alert(error);
}
});
仕様書
Specification |
---|
HTML Standard # dom-select-showpicker |
ブラウザーの互換性
BCD tables only load in the browser