フォームの入力モードを自動で変える

お問い合わせなどのフォームを入力する時、「名前」は全角、「電話番号」は半角・・・などと入力する項目ごとに入力モードを変更するのは面倒ですよね。

というわけで、今回は「フォームの入力モードを自動で変える」ちょっとしたcssのtipsを紹介します。

IE6とFirefox3は、大丈夫でしたが、safari・chromeではダメでした。とはいえ、ユーザビリティ的に使う価値はあるかと思います。

html

<p>日本語入力モード・変更可能</p>
<input type="text" name="japan" id="mode1" />

<p>英数入力モード・変更可能</p>
<input type="text" name="english" id="mode2" />

<p>英数入力モード・変更不可</p>
<input type="text" name="english2" id="mode3" />

css

#mode1 {
ime-mode:active;
}
#mode2 {
ime-mode:inactive;
}
#mode3 {
ime-mode:disabled;
}

ime-mode:active で日本語入力モード
ime-mode:inactiveで英数入力モード
ime-mode:disabledで英数入力だけのモード

になります。