Help us understand the problem. What is going on with this article?

ブラウザからIME状態を制御する方法

More than 1 year has passed since last update.

概要

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は全角文字を入力するためにだけ使われるわけではない。例えば、「めあど」を単語登録してメールアドレスを入力しているユーザがいる。
uenosy
ata5
株式会社愛宕はIT技術の提供のみでなく、企画、提案、保守運用などインターネットのあらゆるニーズにお応えいたします
https://www.ata5.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした