JavaScript / CSS 編 - IME を制御する(Win IE のみ) | ゼロから始めるストラテジー

JavaScript / CSS 編 - IME を制御する(Win IE のみ)

 お問い合わせや注文フォームで、郵便番号、メールアドレス、年齢など半角で入力して欲しいところってありますよね。Windows アプリケーション等であれば、IME の制御は可能なのですが、HTML 上でも制限つきながら IME の制御をすることができます。次のテキストボックスに何か入力してみてください。

IME ON (全角文字入力)

IME OFF (半角文字入力)

いかがですか?もしあなたが Windows 上で Internet Explorer をお使いであれば、自動的に IME の ON/OFF が切り替わったのではないでしょうか。残念ながら、それ以外の環境では無視されます。ブラウザー市場のほとんどを Internet Explorer が独占している状況を考えると、このような仕組みを入れておくことは非常に効果的です。他の環境においては、無害ですので、ご安心ください。

では、HTML ソースをご紹介しましょう。

IME ON (全角文字入力)
<input type="text" name="imeon" style="ime-mode:active">

IME 無効 (半角文字入力)
<input type="text" name="imeoff" style="ime-mode:disabled">

 実は、スタイルシートなんです。赤字の部分にご注目ください。 style="ime-mode:active" と入れれは、IME を起動します。そして、style="ime-mode:disabled" を入れれば、IME を無効(使えなくする)にすることができます。disabled を指定した場合には、IME をマニュアルで起動することすらできませんので、確実に半角入力を促すことができます。

 active, disabled 以外にも inactive というキーワードもあります。inactive を指定した場合には、IME をオフにすることができますが、マニュアルでオンにすることができます。確実に半角で入力して欲しい場合には、力不足ですね。ご参考までに例を掲載しておきます。

IME OFF (半角文字入力)
<input type="text" name="imeoff" style="ime-mode:inactive">