【HTML】フォームの文字入力モードを自動的に切り替える方法

メールアドレスを入力するボックスでは、入力モードを自動で半角英数字に変更したい。という場合に使えるコードです。
スマートフォンの場合・ガラケーの場合はどうすれば良いのかもご紹介します。

PCの場合

ime-modeというCSSプロパティを使用します。

<form action="">
<input type="text" style="ime-inactive;" />
</form>

これで入力ボックスがアクティブになると入力モードが自動で半角英数字に変更されます。

ime-mode: auto;
状況に応じて自動設定。初期値。

ime-mode: active;
初期値が日本語入力モード。

ime-mode: inactive;
初期値が英数字入力モード。

ime-mode: disabled;
英数字入力モードで固定されます。

デモ

ならねえよ

残念ながら、このプロパティは、Windows しかも IE の独自プロパティです。
Firefox も対応していますが、その他のブラウザでは無反応です。
他のブラウザの場合は、Javascript を使ってバリデーションしてやるしかないです。

スマートフォンの場合

スマートフォンの場合は、HTML5が使えるので、input type で表示されるキーボードを制御することができます。

【HTML5】inputタグのtype属性を使ってiPhoneからのテキスト入力を少し快適にする

ガラケーの場合

ガラケーの場合は、docomo、au、sofotbank それぞれで独自のタグが準備されています。

【docomo】istyle 属性

iモード対応HTMLタグ一覧

<input type="text" istyle="3" />

属性値	モード1（かな入力モード時）	モード2（ポケットベル入力モード時）
1	全角かな	全角文字
2	半角カナ	半角文字
3	英字	半角文字
4	数字	半角文字

【au】format 属性

EZweb 仕様書

<input type="text" format="*x" />

format属性値	開始入力モード	入力可能文字種
a	半角英小文字	半角英小文字、記号/句読点
A	半角英大文字	半角英大文字、記号/句読点
N	半角数字	半角数字
x	半角英小文字	半角英小文字、半角英大文字、数字、記号/句読点
X	半角英大文字	半角英小文字、半角英大文字、数字、記号/句読点
m	半角英小文字	すべての文字種
M	全角かな	すべての文字種

さらにアルファベットの前に数字を付加することにより入力文字数の制限が可能です。文字数制限をしない場合は * を付けます。

【Softbank】mode 属性

<input type="text" mode="alphabet" />

属性値	入力モード
hiragana	全角ひらがな
katakana	全角カタカナ
ankakukana	半角カタカナ
lphabet	英字
numeric	数字

例）3キャリアで入力文字を英文字に制限する

<input type="text" istyle="3" format="*x" mode="alphabet" />