diff options
| -rw-r--r-- | files/ja/web/api/htmlinputelement/showpicker/index.md | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/files/ja/web/api/htmlinputelement/showpicker/index.md b/files/ja/web/api/htmlinputelement/showpicker/index.md new file mode 100644 index 0000000000..54a13e2ba9 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/showpicker/index.md @@ -0,0 +1,80 @@ +--- +title: HTMLInputElement.showPicker() +slug: Web/API/HTMLInputElement/showPicker +tags: + - API + - HTML DOM + - HTMLInputElement + - メソッド + - NeedsCompatTable + - リファレンス +browser-compat: api.HTMLInputElement.showPicker +translation_of: Web/API/HTMLInputElement/showPicker +--- +{{ APIRef("HTML DOM") }} + +**`HTMLInputElement.showPicker()`** メソッドは、ブラウザーのピッカーをユーザーに表示します。 + +ブラウザーのピッカーは、その要素が `"date"`, `"month"`, `"week"`, `"time"`, `"datetime-local"`, `"color"`, `"file"` の型のうちの何れかである場合に表示されます。これは {{htmlelement("datalist")}} 要素や [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) 属性からの項目を表示することもできます。 + +### 返値 + +{{jsxref("undefined")}} です。 + +### 例外 + +- `NotAllowedError` の {{domxref("DOMException")}} + - : タッチジェスチャーやマウスクリックなどのユーザージェスチャーに応答して呼び出されなかった場合に発生します。 +- `SecurityError` の {{domxref("DOMException")}} + - : 別オリジンの iframe の中で呼び出した場合に発生します。 + +## 構文 + +```js +element.showPicker(); +``` + +## 例 + +この例のボタンをクリックすると、ブラウザーの日付ピッカーが表示されます。 + +### HTML + +```html +<input type="date"> +<button>日付ピッカーを表示</button> +``` + +### JavaScript + +```js +const button = document.querySelector("button"); +const dateInput = document.querySelector("input"); + +button.addEventListener("click", () => { + try { + dateInput.showPicker(); + // 日付ピッカーが表示されます。 + } catch (error) { + window.alert(error); + // 失敗した場合は外部ライブラリーを使用してください。 + } +}); +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ HTMLElement("input") }} +- {{ domxref("HTMLInputElement") }} |