お問い合わせなどのフォームを入力する時、「名前」は全角、「電話番号」は半角・・・などと入力する項目ごとに入力モードを変更するのは面倒ですよね。
というわけで、今回は「フォームの入力モードを自動で変える」ちょっとした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
コメントする