【inputmode属性】ソフトウェアキーボードの挙動を制御する。「HTML・解説」- ノブレコ
nobreco
inputmode属性とは
inputmode属性は、スマホなどのソフトウェア上でのキーボード操作の挙動を制御するための属性です。
この属性は、<textarea>要素、<input>要素で、主に入力可能なコントロールで使用することが多いです。
またcontenteditable属性を使って編集可能になった要素でも使用することがあります。
【仕様】HTML living standerd
★属性の区分
グローバル属性
★対応ブラウザ
・Chrome
・Edge
・Fire Fox
・Opera
【使用目的】
ソフトウェアキーボード（仮想上のキーボード）の挙動を制御するために使用します。
主にソフトウェアキーボードのキー配列が入力内容に適したものに切り替えることを目的に使います。
ですが物理的なキーボードには適応されません。
挙動を制御するために指定できる値は以下の通りです。
| 属性値 | 効果 |
| none | ソフトウェアキーボードを非表示にします。 |
| text | ユーザーの国や地域に合わせたテキスト入力が可能なソフトウェアキーボードを表示します。 |
| tel | 電話番号入力が可能なソフトウェアキーボードを表示します。 |
| url | 属性値がtextの場合の効果に加えて、URLの入力を補助するソフトウェアキーボードを表示します。 |
| 属性値がtextの場合の効果に加えて、電子メールアドレスの入力を補助するソフトウェアキーボードを表示します。 | |
| numeric | 数字入力が可能なソフトウェアキーボードを表示します。 |
| decimal | ユーザーの国や地域に合わせた数値や区切り文字とともに、少数入力が可能なソフトウェアキーボードを表示します。 |
| search | 検索に最適化されたソフトウェアキーボードを表示します。 |
【使用上の注意点】
① inputmode属性の属性値がurlの場合、入力欄では初期値が日本語入力になってしまうことがあります。
この挙動は日本語入力可能なキーボードの場合に限ります。
② inputmode属性は、ソフトウェアキーボードの表示を制御できますが、入力値までは制御できません。
【指定できる要素】
inputmode属性は、グローバル属性のため、全てのHTML要素に指定することができます。
ですが、指定したHTML要素との組み合わせ次第では、属性の効果が発揮されないことがあるので注意してください。
★旧HTMLからの変更点
HTML LS：inputmode属性がグローバル属性として再定義されました。
実用例
■inputmode属性の使用例
★inputmode属性の記述例
ソフトウェアキーボードを非表示にする記述例。
まとめ
この記事では、inputmode属性についての解説をいたしました。
この属性は、ソフトウェアキーボードの挙動を制御するための属性です。
属性値によって最適なキーボード表示にすることができる便利な属性ですが、入力値の変更はできないので、その点には注意が必要です。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん⚡
