携帯の入力フォーム

例えば、何かの入力フォームで、半角数字のみを入力してもらうテキスト入力欄があったとします。

そこで何の工夫も無く、

input type=”text” maxlength=”6″ size=”7″ name=”userid”

みたいな感じでやっちゃうと、ユーザーがその入力欄に文字を入力しようとすると、最初に全角かなモードでテキスト入力のウィンドウが開いちゃいます。
これを、最初から半角数字モードで開くようにするだけで、ユーザーが感じるストレスは結構軽くなるんじゃないでしょうか。

各携帯電話のキャリアでは、このようなテキスト入力欄に対して、文字入力の種別を指定するための、input要素向けの独自属性を用意しています。
が、DoCoMo、au、Softbankそれぞれ別の属性になってますので、複数キャリア対応のサイトの場合は、全ての属性を列記しないといけません。
DoCoMoのiモードの場合 (istyle属性)

input type=”text” maxlength=”6″ size=”7″ name=”userid”

という風に、istyle属性を追加することで、入力してもらう文字種別を指定できます。

istyle属性の値の対応は以下の通り。

istyle=”1″
全角かなモード
istyle=”2″
半角カナモード
istyle=”3″
半角英字モード
istyle=”4″
半角数字モード

auのEZwebの場合 (format属性)

input type=”text” maxlength=”6″ size=”7″ name=”userid”

という風に、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” maxlength=”6″ size=”7″ name=”userid”

という風に、mode属性を追加することで、入力してもらう文字種別を指定できます。

mode属性の値の対応は以下の通り。

mode=”hiragana”
全角かなモード
mode=”katakana”
全角カナモード
mode=”alphabet”
半角英字モード
mode=”numeric”
半角数字モード

DoCoMo、au、Softbankの主要3キャリアに対応させるには

上記を踏まえて、DoCoMo、au、Softbankの主要3キャリアに対応したテキスト入力欄を作ろうと思うと、以下のようになります。

まず、全角かなも半角英数も混在するような、何でもOKな入力欄の場合。

input type=”text” maxlength=”128″ size=”10″ name=”f1″ istyle=”1″ format=”*M” mode=”hiragana”
続いて、メールアドレス等の半角英数(+記号)だけを入力してもらいたい場合。

input type=”text” maxlength=”128″ size=”10″ name=”f2″
istyle=”3″ format=”*x” mode=”alphabet”

そして、電話番号や連番のID等、半角数字のみを入力してもらいたい場合。

input type=”text” maxlength=”128″ size=”10″ name=”f3″ istyle=”4″ format=”*N” mode=”numeric”
以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です