ケータイサイトのフォーム入力の文字種別を指定する方法
ケータイはPCと比較して、文字入力関連のインターフェイスが非情に不便です。
それはもちろん、携帯電話という端末の特性上、仕方が無い部分でもあるかもしれませんが、ちょっとした工夫でユーザーに与える文字入力へのストレスを軽減することが出来ます。
例えば、何かの入力フォームで、半角数字のみを入力してもらうテキスト入力欄があったとします。
そこで何の工夫も無く、
<input type="text" name="userid" value="" size="7" maxlength="6" />
みたいな感じでやっちゃうと、ユーザーがその入力欄に文字を入力しようとすると、最初に全角かなモードでテキスト入力のウィンドウが開いちゃいます。
これを、最初から半角数字モードで開くようにするだけで、ユーザーが感じるストレスは結構軽くなるんじゃないでしょうか。
各携帯電話のキャリアでは、このようなテキスト入力欄に対して、文字入力の種別を指定するための、input要素向けの独自属性を用意しています。
が、DoCoMo、au、Softbankそれぞれ別の属性になってますので、複数キャリア対応のサイトの場合は、全ての属性を列記しないといけません。
DoCoMoのiモードの場合 (istyle属性)
<input type="text" name="userid" value="" size="7" maxlength="6" istyle="4" />
という風に、istyle属性を追加することで、入力してもらう文字種別を指定できます。
istyle属性の値の対応は以下の通り。
- istyle="1"
- 全角かなモード
- istyle="2"
- 半角カナモード
- istyle="3"
- 半角英字モード
- istyle="4"
- 半角数字モード
auのEZwebの場合 (format属性)
<input type="text" name="userid" 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」「*N」等の頭の「*(アスタリスク)」は、「文字数の制限なし」という意味です。
「常に五桁の数字だけを入力してもらいたい」という場合は format="5N"という風に、「*(アスタリスク)」の代わりに、指定した入力文字数を指定すれば、入力する文字数も制限できます。
ただし、「五桁以内の数字を入力してもらいたい」という場合には、この指定方法は使えない端末が多いです。
四桁とか三桁の数字を入力してOKを押しても、端末側でエラーを返してしまいます。
あくまでも「文字数が固定の場合」のみに利用できる方法です。
Softbankの場合 (mode属性)
<input type="text" name="userid" value="" size="7" maxlength="6" mode="numeric" />
という風に、mode属性を追加することで、入力してもらう文字種別を指定できます。
mode属性の値の対応は以下の通り。
- mode="hiragana"
- 全角かなモード
- mode="katakana"
- 全角カナモード
- mode="alphabet"
- 半角英字モード
- mode="numeric"
- 半角数字モード
DoCoMo、au、Softbankの主要3キャリアに対応させるには
上記を踏まえて、DoCoMo、au、Softbankの主要3キャリアに対応したテキスト入力欄を作ろうと思うと、以下のようになります。
まず、全角かなも半角英数も混在するような、何でもOKな入力欄の場合。
<input type="text" name="f1" value="" size="10" maxlength="128"
istyle="1" format="*M" mode="hiragana" />
続いて、メールアドレス等の半角英数（＋記号）だけを入力してもらいたい場合。
<input type="text" name="f2" value="" size="10" maxlength="128"
istyle="3" format="*x" mode="alphabet" />
そして、電話番号や連番のID等、半角数字のみを入力してもらいたい場合。
<input type="text" name="f3" value="" size="10" maxlength="128"
istyle="4" format="*N" mode="numeric" />
以上のようになります。
とりあえず、この3つだけ覚えておけば、ほとんど事足りるかな？
2009年3月4日追記
コメント欄にて application/xhtml+xml で出力する際の表記の仕方について、ご指摘頂きました。
特に DoCoMo 向けに外部CSS を利用したサイトを構築する際には、非常に参考になるかと思います。
- 関連するブログ記事
-
- 現在位置
- TOP > Web制作技術 > モバイル(携帯電話・ケータイ)Web > ケータイサイトのフォーム入力の文字種別を指定する方法
- 前のブログ記事
- 「アンチ・セカンドライフ」と「アンチ・セカンドライフ・ブーム」は分けて考えなきゃいけない [2007年11月18日 23:59]
- 次のブログ記事
- メール受信時に perl スクリプトを起動して自動処理させる方法 [2007年11月20日 10:46]
コメント(2)
text/html 出力の場合これでもいいのですが、ドコモで i-CSS を使う場合など、application/xhtml+xml で出力する場合は style 属性での指定が必要なようです。
ドコモの場合、例によって http://www.nttdocomo.co.jp/binary/pdf/service/imode/make/content/xhtml/
HTML_XHTML_taglist.pdf を見れば対応が掲載されています。istyle="1" は style="-wap-input-format:"*<ja:h>"" とするようです。
au の場合、公式ドキュメントがないのですが、WAP フォーラムの文書を参照すればよいようです。style="-wap-input-format:*M;" などとします。
> ゆりこさん
前回に引き続き、ご指摘ありがとうございます。
最近ではケータイサイトもCSSデザインが当たり前になってきて、application/xhtml+xml で出力するケースも増えてきていると思うので、非常に参考になりました。
コメントする