携帯サイト(モバイルサイト)のフォーム入力項目のデフォルトを半角英数字等にする

2008 年 7 月 8 日 - 携帯用ホームページ制作のメモ

WordPressに変わって一発目の記事です。
気分転換が出来たのか、記事を書くのにわくわくしています。
さて、今回は携帯サイト(モバイルサイト)のメールフォーム入力の時にメールアドレスや半角数字での電話番号等を入力するときにPCなら簡単に切り替えできるけど携帯の場合は非常に面倒くさいと思います。
常そんな時にユーザビリティの為に予めメールアドレス項目や電話番号、郵便番号項目を半角英数字や半角数字入力にする方法をご紹介します。
モバイル特有?の手間でやはり3キャリア毎に違うみたいです。

先ずはdocomoから

istyle属性をつかって判別します。

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

次にau

format属性を使って判別します。

format=”*A”
半角英字(大文字)モード
format=”*a”
半角英字(小文字)モード
format=”*N”
半角数字モード
format=”*X”
半角英数(大文字)モード
format=”*x”
半角英数(小文字)モード
format=”*M”
全角かなモード
format=”*m”
全角英字モード

※「*A」「*a」「*N」等の頭の[*]は、文字数の制限なしという意味です。
*の変わりに数字を入れると文字数も制限できますが、対応してない端末があったり、機種によってはエラーが出ますし他のキャリアでは類似の機能がありませんのであまりオススメしません。

最後にSoftbank

Softbankはmode属性で文字を種別します。

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

「かな」と「カナ」はローマ字になってるのでなんとなくなじみやすい。

さて上記、フォーム入力項目のデフォルト設定の使い方ですが、inputタグのなかにそれぞれ対応したいキャリアのソースを入れるだけ。

3キャリアとも半角英字にしたい場合。(メールアドレス入力項目等に使うことが多いです。)
<input name=”mailadd” size=”20″ type=”text” />

3キャリアとも半角数字にしたい場合。(電話番号や郵便番号入力)
<input name=”telfax” size=”20″ type=”text” />

という感じです。

コメントを残す