inputmode
inputmode はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。 これにより、ブラウザーは適切な仮想キーボードを表示することができます。
これは主に <input> 要素で使用されますが、 contenteditable モードの任意の要素で使用することができます。
重要なことは、 inputmode 属性は入力に対していかなる有効性の要求も発生させないということです。入力が特定のデータ型に適合することを要求するには、適切な <input> 要素型を選んでください。 <input> 型を選ぶ際の特定の指針については、値の節を参照して下さい。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 66 | 79 | 95 | 12.1 | 66 | 12.2 | |
| DOM API | ||||||
| HTMLElement の inputMode プロパティは、この要素の inputmode 属性の値を反映します。 | 66 | 79 | 95 | 12.1 | 66 | 12.2 |
注釈 1件
削除済み
- このバージョンで機能が削除されました (23)
注釈 1件
実装メモ
- iOS 13以前では、`inputmode="none"`は何の効果もなかった。
基本構文
HTML
<input inputmode="numeric" pattern="[0-9]*" placeholder="数字のみ">
<input inputmode="decimal" placeholder="小数入力">
<input inputmode="tel" placeholder="電話番号">
<input inputmode="email" placeholder="メールアドレス">
<input inputmode="url" placeholder="URL">ライブデモ
Mode comparison table
Show how a single text input can suggest different virtual keyboards.
プレビュー全画面表示
実務での使いどころ
-
inputmode の活用
inputmode はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。