定義と使い方
inputmode属性は、
仮想キーボードを備えたデバイス（例：モバイルやタブレット）において、入力フィールドや編集可能なコンテンツに表示する仮想キーボードの入力モードを明示的に指定します。（ブラウザはこのヒントに基づいて、適切なキーボードタイプを表示します。）
この属性は、HTMLの入力可能なコントロール要素やcontenteditable="true"属性を使用して編集可能にした要素の仮想キーボード入力モードを明示的に指定することで、特にモバイル環境のユーザーに対して、より有用なユーザー体験（User Experience, UX）を提供するために使用されます。
補足説明contenteditable属性は、要素のコンテンツを編集できるかどうかを指定します。
この属性をtrueに設定すると要素のコンテンツを編集でき、falseに設定すると編集できません。
基本例
上記の例示コードのようにinputmode属性の値を"numeric"に設定すると、ブラウザは以下のキャプチャ画面のような仮想キーボードを提供します。
参考してください！
仮想キーボードの外観やユーザーインターフェースは、デバイスやブラウザ、ユーザーの言語設定によって異なる場合があります。
inputmodeの属性値
inputmode |
説明 | 基本的な例仮想キーボードの外観やユーザーインターフェースは、デバイスやブラウザ、ユーザーの言語設定によって異なる場合があります。 |
|---|---|---|
inputmode="none" |
仮想キーボードを表示してはいけません。 | 仮想キーボードは表示されません。ページ側で独自のキーボードや入力制御装置によって入力制御を実装する場合に使用します。例えば、金融系アプリケーションにおいて、セキュリティ向上のために数字がランダムに配置された数値キーパッドを独自に実装する必要がある場合などに利用されます。 |
inputmode="text" |
ユーザーの現在の地域（locale）に基づいたテキストを入力できる仮想キーボードを表示する必要があります。 | 
|
inputmode="tel" |
電話番号を入力できる仮想キーボードを表示する必要があります。これには、数字0〜9、#文字、および*文字に対応するキーが含まれている必要があります。 電話番号の入力が必須の場合は、この値を使用するよりも、HTMLの意味論的な観点を考慮し、この値がデフォルトで設定されている <input type="tel">を使用することを推奨します。 |
|
inputmode="url" |
ユーザーの現在の地域（locale）に基づいてテキスト入力が可能な仮想キーボードを表示する必要があり、/や.文字など、URL入力を補助するためのキーに加えて、www.や.comなど、ドメイン名で一般的に使用される文字列を素早く入力するためのキーが備わっている必要があります。 URLの入力が必須の場合は、この値を使用するよりも、HTMLの意味論的な観点を考慮し、この値がデフォルトで設定されている <input type="url">を使用することを推奨します。 |
|
inputmode="email" |
ユーザーの現在の地域（locale）に基づいてテキスト入力が可能な仮想キーボードを表示する必要があり、@文字や.文字など、メールアドレスの入力を補助するためのキーが備わっている必要があります。 メールアドレスの入力が必須の場合は、この値を使用するよりも、HTMLの意味論的な観点を考慮し、この値がデフォルトで設定されている <input type="email">を使用することを推奨します。 |
|
inputmode="numeric" |
数字入力が可能な仮想キーボードを表示する必要があります。このキーワードは、PINコードの入力に有用です。 数値入力が必須の場合は、この値を使用するよりも、HTMLの意味論的な観点を考慮し、この値がデフォルトで設定されている <input type="number">を使用することを推奨します。 |
|
inputmode="decimal" |
小数を含む数値入力が可能な仮想キーボードを表示する必要があります。数字キーに加えて、現在の地域（locale）で使用される書式区切り文字を表示する必要があります。 | 
|
inputmode="search" |
検索に最適化された仮想キーボードを表示する必要があります。 検索クエリの入力が必須の場合は、この値を使用するよりも、HTMLの意味論的な観点を考慮し、この値がデフォルトで設定されている <input type="search">を使用することを推奨します。 |
|
参考してください！inputmode属性が指定されていない場合（またはブラウザが対応していない場合）、表示される既定の仮想キーボードはブラウザによって決定されます。
例えば、<input>に指定されたtype属性やpattern属性などの状況情報を基に、ユーザーにどの種類の仮想キーボードを提示するかが判断されます。
参考してください！
仮想キーボードのEnterキーに表示するテキストやアイコンの形状などのラベル（action label）を明示的に指定したい場合は、enterkeyhint属性を使用してください。
仕様書
| 仕様書 | |
|---|---|
inputmode
|
HTML Standard #attr-inputmode |
ブラウザ互換性
| デスクトップ | ||||
|---|---|---|---|---|
| 属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
inputmode
|
66 | 79 | 95 | 12.2 |
iOS 13以前のSafariでは、inputmode="none"は効果がありませんでした。
| モバイル | |||
|---|---|---|---|
| 属性 |
モバイル Chrome
|
モバイル Firefox
|
Safari
|
inputmode
|
66 | 95 | 12.2 |