概要
WebアプリのUIとしてフォームを作成する場合は、HTMLの<input>タグを利用する。
この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。
ここではその方法を解説する。
方法
一般的な実装
<input type="text" value="" style="ime-mode: active">
これでIMEがオンの状態になる。ime-modeは以下の値を取りうる。
-
active: IMEをオンにする。ただし、ユーザはオフにする操作ができる。 -
inactive: IMEをオフにする。ただし、ユーザはオンにする操作ができる。 -
disabled: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。
議論
対応ブラウザについて
このime-modeというスタイルはCSS3の標準ではない。
そのため、必ずしも全てのブラウザが対応しているわけではないし、これから残るかどうかもわからない。
現在の対応ブラウザは、IE11、Edge、FirefoxでChromeとSafariは対応していない。
また、スマートフォンは全く対応していない。
元々はIEからMS-IMEを制御するためのMicrosoft独自仕様である。
代替手段について
非対応ブラウザについても一応の代替手段があるが、全く同じ条件で実装できるわけではない。
これらは実装依存が甚だしいためIME制御のためだけに使用してはならない。
-
<input type="number">数値のみ入力可になる。 -
<input type="tel">半角英数字のみ入力可になる。スマートフォンの場合は、電話キーパッドになる。 -
<input type="email">半角英数字のみ入力可になる。 -
<input type="url">半角英数字のみ入力可になる。 -
<input type="password">半角英数字のみ入力可になる。さらに、表示がマスクされる。
inputmode属性
HTML5.1(WHATWG)のinputmode属性はChrome 66以降くらいしか対応していない。このままだとHTML5.2で廃止される可能性がある。
UXについて
そもそも、基本的な設計指針としてIMEの制御は必要最低限にするべきである。
なぜなら、IMEはブラウザ外でも使用され、その際のモード切替は全てユーザが行っているからである。
WebフォームでIME状態を制御するということはユーザの知らないうちにモードが切り替わっているということであり、このことをユーザに伝える手段がない場合ユーザを混乱させるだけになってしまう。
採用基準として例を挙げると、
- 全角半角どちらも受け付けるフォーム
- IMEを制御すべきではない。なぜなら、1文字目に全角を入力するか半角を入力するかはユーザ以外選択できないため。
- 全角文字がエラーになるフォーム
- IMEを制御（この場合、
inactivate）してもよい。なぜなら、通常IMEをオフにしてから入力するため。ただし、disabled（無効）にしてはならない。IMEは全角文字を入力するためにだけ使われるわけではない。例えば、「めあど」を単語登録してメールアドレスを入力しているユーザがいる。
- IMEを制御（この場合、