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

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

 

 

実際にフォームの中をクリックしてみてください。

 

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

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で英数入力だけのモード

になります。

トラックバック(0)

このブログ記事を参照しているブログ一覧: フォームの入力モードを自動で変える

このブログ記事に対するトラックバックURL: http://www.web-mora.co.jp/admin/mt-tb.cgi/130

コメントする