showPicker() for <input>
HTMLInputElement.showPicker() メソッドは、input 要素のブラウザーのピッカーを表示します。
これは、通常、要素が選択されたときに表示されるピッカーと同じものですが、ボタンを押すなど、ユーザーの操作で起動させることができます。
ブラウザーがよく実装しているのは、"date", "month", "week", "time", "datetime-local", "color", "file" の型の入力欄です。これは <datalist> 要素や autocomplete 属性からの項目を表示することもできます。
もっと一般的に言えば、このメソッドは、ピッカーを持つプラットフォーム上のあらゆる入力要素にピッカーを表示するのが理想的です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 101 | 16 | 99 | 16 | |
showPicker (color input) color`入力 | 99 | 99 | 101 | 16 | 99 | |
showPicker (date input) 日付の入力 | 99 | 99 | 101 | 17.4 | 99 | |
showPicker (datetime local input) datetime-local`入力 | 99 | 99 | 101 | 17.4 | 99 | |
showPicker (file input) ファイル`入力 | 99 | 99 | 101 | 16 | 99 | 16 |
基本構文
JAVASCRIPT
showPicker() 実務での使いどころ
-
showPicker() for <input> の活用
HTMLInputElement.showPicker() メソッドは、input 要素のブラウザーのピッカーを表示します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。