このページはコミュニティーの尽力で英語から翻訳されました。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 要素のブラウザーのピッカーを表示します。
これは、通常、要素が選択されたときに表示されるピッカーと同じものですが、ボタンを押すなど、ユーザーの操作で起動させることができます。
ブラウザーがよく実装しているのは、"date","month","week","time","datetime-local","color","file" の型の入力欄です。これは<datalist> 要素やautocomplete 属性からの項目を表示することもできます。
もっと一般的に言えば、このメソッドは、ピッカーを持つプラットフォーム上のあらゆる入力要素にピッカーを表示するのが理想的です。
構文
showPicker()引数
なし。
返値
undefined です。
例外
InvalidStateErrorのDOMException要素が変更可能でない場合、つまりユーザーが変更することができない、または自動的に事前入力することができない場合に発生します。
NotAllowedErrorのDOMExceptionタッチジェスチャーやマウスクリックなどのユーザー操作によって明示的に起動されなかった場合に発生します（ピッカーには一時的な有効化が必要です）。
SecurityErrorのDOMException別オリジンの 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>カラーピッカーを表示</button></p><p> <input type="file" /> <button>ファイルピッカーを表示</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); } });});結果
それぞれの入力型の横にあるボタンをクリックすると、その入力型のピッカーが表示されます。
データリスト入力における showPicker()
showPicker()は、<datalist> で定義されている選択肢のリストに対してピッカーを起動することができます。
まず<datalist> を HTML で定義します。いくつものインターネットブラウザー、それを使用するtext 型の入力、そしてボタンから構成されています。
<datalist> <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>ブラウザーを選択</button>下記コードでは、ボタンがクリックされたときにshowPicker() を呼び出すイベントリスナーを追加しています。
const button = document.querySelector("button");const browserInput = document.querySelector("input");button.addEventListener("click", () => { try { browserInput.showPicker(); } catch (error) { // 他のピッカーの仕組みで代替 }});自動補完における showPicker()
showPicker() はautocomplete のある入力欄に対するピッカーを起動することができます。
ここでは、自動補完の選択肢の "name" を取る入力を定義しています。
<input autocomplete="name" /> <button>自動補完の選択肢を表示</button>下記コードは、ボタンがクリックされたときの入力のピッカーを示すものです。
const button = document.querySelector("button");const browserInput = document.querySelector("input");button.addEventListener("click", () => { try { browserInput.showPicker(); } catch (error) { // 他のピッカーの仕組みで代替 }});仕様書
| Specification |
|---|
| HTML # dom-input-showpicker |