HTML Living Standard/inputmode属性
inputmode属性
[編集]inputmode属性は、仮想キーボードの種類を指定するHTML属性です。この属性を使用すると、入力フィールドに適切な仮想キーボードを表示させ、ユーザーが入力しやすくなるようにします。
基本構文
[編集]<input type="text" inputmode="numeric">
input: 属性を適用するHTML要素。inputmode: 仮想キーボードの種類を指定します。
有効な値
[編集]- none
- 仮想キーボードを表示しません。通常、ユーザー入力を必要としない場合に使用します。
- text
- 通常のテキスト入力用のキーボードを表示します。アルファベットや記号など、一般的な文字を入力するためのキーボードです。
- decimal
- 数字と小数点を入力するためのキーボードを表示します。特に数値入力が求められる場合に使用します。
- numeric
- 数字のみのキーボードを表示します。電話番号やパスコードの入力に適しています。
- tel
- 電話番号の入力用のキーボードを表示します。国際的な電話番号の入力に対応しています。
- search
- 検索用のキーボードを表示します。検索ボックスや検索フィールドに使用します。
- email
- メールアドレスの入力用のキーボードを表示します。メールアドレスを入力するために必要な特殊文字（@、.）などが含まれています。
- url
- URLを入力するためのキーボードを表示します。URL入力に必要なスラッシュやドットなどの記号が含まれます。
使用例
[編集]- 電話番号入力用のキーボードを表示
<input type="tel" inputmode="tel" placeholder="電話番号を入力">
- メールアドレス入力用のキーボードを表示
<input type="email" inputmode="email" placeholder="メールアドレスを入力">
動作の概要
[編集]- 仮想キーボードのカスタマイズ:
- 入力フィールドに最適な仮想キーボードを表示することで、ユーザーの入力体験を向上させることができます。
- ユーザー入力の支援:
- 特定の入力形式に合わせてキーボードをカスタマイズすることで、誤入力を減らし、入力がスムーズに行えるようになります。
inputmode属性の利用シーン
[編集]- 電話番号入力:
- 電話番号を入力する際、数字入力に特化したキーボードを表示させることができます。
- メールアドレスの入力:
- メールアドレス入力フィールドでは、@やドットなどの特殊記号を簡単に入力できるようにキーボードをカスタマイズできます。
- URL入力:
- URLを入力する際に、必要な記号（スラッシュ、ドットなど）を含むキーボードを表示します。
注意点
[編集]- ブラウザのサポート状況:
- この属性は主にモバイルブラウザで動作しますが、すべてのブラウザでサポートされているわけではありません。特にデスクトップ環境では動作しないことがあります。
- デバイス依存の挙動:
- 仮想キーボードの種類や表示内容は、使用しているデバイスやブラウザによって異なる場合があります。
互換性
[編集]| ブラウザ | サポート状況 |
|---|---|
| Chrome | 対応 |
| Edge | 対応 |
| Firefox | 対応 |
| Safari | 対応 |
| Opera | 対応 |