概要

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は全角文字を入力するためにだけ使われるわけではない。例えば、「めあど」を単語登録してメールアドレスを入力しているユーザがいる。