2010年02月08日

フォームに記入時に入力モードを指定する方法


2月期間限定!!「バレンタインショコラ♪」 完成です。バレンタインデーの贈り物にもお勧めです。
ご注文、商品詳細はこちらを今すぐクリック!!



和み堂の「お問い合わせ・ご予約」フォームは携帯電話からもアクセスしていただけるようになっているんですが、家人が携帯電話からフォームに入力する時に入力モードの切り替えをしないといけないのは面倒だとの指摘があり、早速対応することに。

確かに携帯電話の文字入力関連のインターフェイスは不便ですし、入力モードを指定しておいた方がユーザビリティーも良いかと思います。

で、参考までにタグの記述方法をご紹介します。

通常のシンプルな入力欄は
<input type="text" name="xxxxxx" value="" size="7" maxlength="6" />みたいな感じになりますが、この場合、入力モードは全角かなモードで入力ウインドウが開いてしまいます。

これを最初から半角数字とか半角英数字の入力モードで入力できるようにするために
各携帯電話キャリアでは、このようなテキスト入力欄に対して、文字入力の種別を指定するための、input要素向けの独自属性が用意されています。

しかし、主要3大キャリアそれぞれ、属性の指定の仕方が違うので、複数キャリア対応のサイトの場合はそれぞれの属性を列記する必要があります。

DoCoMoのiモードの場合 (istyle属性)
<input type="text" name="xxxxxx" value="" size="7" maxlength="6" istyle="4" />
という風に、istyle属性を追加することで文字種別を指定できます。
istyle属性の値の対応は以下のようになります。
istyle="1" → 全角かなモード
istyle="2" → 半角カナモード
istyle="3" → 半角英字モード
istyle="4" → 半角数字モード

auの場合 (format属性)
<input type="text" name="xxxxxx" value="" size="7" maxlength="6" format="*N" />という風に、format属性を追加することで文字種別を指定できます。
format属性の値の対応は以下のようになります。
format="*A" → 半角英字(大文字)モード
format="*a" → 半角英字(小文字)モード
format="*N" → 半角数字モード
format="*X" → 半角英数(大文字)モード
format="*x" → 半角英数(小文字)モード
format="*M" → 全角かなモード
format="*m" → 全角英字モード
ここで、「*A」や「*a」等の「*」は、文字数の制限をしないという意味で、例えば入力欄に3文字だけ入力してもらいたい場合は
format="3N"
という風に、「*」の代わりに指定したい数値を記入することで入力文字数を制限することが可能です。

ただし、この文字数の指定は指定した文字数に固定される場合に限って有効のようで、3文字の指定のところ2文字しか入力されていないとエラーになるようです。

Softbankの場合 (mode属性)
<input type="text" name="xxxxxx" value="" size="7" maxlength="6" mode="numeric" />という風に、mode属性を追加することで文字種別を指定できます。
mode属性の値の対応は以下のようになります。
mode="hiragana" → 全角かなモード
mode="katakana" → 全角カナモード
mode="alphabet" → 半角英字モード
mode="numeric" → 半角数字モード

以上の事を踏まえて、属性を追加すれば、入力文字種を指定することができます。

DoCoMo、au、Softbankの主要キャリアすべてに対応した入力欄にするには例えば下記のように記述すればokです。

メールアドレス等の半角英数だけを入力してもらいたい場合↓
<input type="text" name="xxxxxx" value="" size="5" maxlength="50" istyle="3" format="*x" mode="alphabet" />
とすればOKです。

数字のみの入力をして貰いたい場合↓
<input type="text" name="xxxxxx" value="" size="5" maxlength="50" istyle="4" format="*N" mode="numeric" />
と記述すればokです。

ちょっとの事で入力のストレスが少しでも軽減できるのですから、是非、やっておきたいところですね。

人気blogランキングに参加中。クリックして戴けるとめっちゃ嬉しいです。→人気blogランキングはここをクリックして頂けると幸いです。
日本ブログ村 健康ブログ 鍼灸(はり・きゅう)にも参加しました。こちらもよろしくです。
posted by 鍼医Kまたはハリー at 18:28| Comment(0) | TrackBack(0) | 素人web知識