【携帯】入力フォームでデフォルト文字種を設定する方法
2009.06.03 Wednesday
携帯サイトでは入力フォームにフォーカスした際、通常は入力モードが「全角かな」になっているのですが、メールアドレスや電話番号を入力する項目など、フォームのデフォルトを半角英字や数字に設定する方法3キャリア別にまとめておきます。
まずは基本的な書き方。
【docomoの場合】
フォームに、istyle="○"と記載。
ただし、type属性にpasswordが指定してある入力フォームでは無効。
【auの場合】
フォームに、format="○"と記載。
【softbankの場合】
フォームに、mode="○"と記載。
mode="hiragana" 全角かなモード
mode="katakana" 全角カナモード
mode="alphabet" 半角英字モード
mode="numeric" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" mode="numeric" /＞
上記タグを、ひとつのフォームに記載すれば3キャリア対応することができます。
===
ここまではよいとして。
WAP 2.0の独自仕様としてあるi-modeXHTMLで書かれているサイトでは、また書き方が違います。
↑※＆は本当は&（半角）です。
さて。これが問題で上記指定を他のキャリアと共存させようとすると問題が発生するようです。
自分では試していないので不確定ですが「SoftBankでは指定が無効になる」やら「SoftBankではデフォルト指定ではなく、他の文字種が入力できなくなる」やら色々と問題があるようです。
そんなこんなで、携帯で全機種の絵文字を表示させる件も然りですが、やはりきちんとした携帯サイトを作るならばキャリア別にページを分けるのが無難だと･･･いうことでしょうか。
なによりも、携帯サイトのキャリア別動作確認は、パソコン上の携帯ビューワーだけでは表示確認の限界があるのが不便なところ。
今回の入力モード切り替えも、ビューワーでは再現できないし。3キャリアだけでなくバージョンによってもかなり表示が変わりますし･･･。
携帯サイト制作は、3キャリア毎に表示・動作確認をしてくれる同僚に協力を得ないときびしいです。
ちなみに･･･こんなサービスもあるようです。
携帯サイト実機テストサービス ケータイテストPro
まずは基本的な書き方。
【docomoの場合】
フォームに、istyle="○"と記載。
istyle="1" 全角かなモード
istyle="2" 半角カナモード
istyle="3" 半角英字モード
istyle="4" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" /＞
istyle="2" 半角カナモード
istyle="3" 半角英字モード
istyle="4" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" /＞
ただし、type属性にpasswordが指定してある入力フォームでは無効。
【auの場合】
フォームに、format="○"と記載。
format="*A" 半角英字（大文字）モード
format="*a" 半角英字（小文字）モード
format="*N" 半角数字モード
format="*X" 半角英数（大文字）モード
format="*x" 半角英数（小文字）モード
format="*M" 全角かなモード
format="*m" 全角英字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" format="*N" /＞
通常は＊のままでよいのですが、ここに数字を入れると、数字の文字数で入力を指定させることになるようです。format="3N"→3文字の数字で入力format="*a" 半角英字（小文字）モード
format="*N" 半角数字モード
format="*X" 半角英数（大文字）モード
format="*x" 半角英数（小文字）モード
format="*M" 全角かなモード
format="*m" 全角英字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" format="*N" /＞
【softbankの場合】
フォームに、mode="○"と記載。
mode="hiragana" 全角かなモード
mode="katakana" 全角カナモード
mode="alphabet" 半角英字モード
mode="numeric" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" mode="numeric" /＞
上記タグを、ひとつのフォームに記載すれば3キャリア対応することができます。
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" format="*N" mode="numeric" /＞
よく「入力制限するタグ」として紹介されていますが、これらは、あくまでもデフォルトの文字種を設定するまでです。＜input type="text" name="hoge" value="" size="12" maxlength="9" istyle="4" format="*N" mode="numeric" /＞
===
ここまではよいとして。
WAP 2.0の独自仕様としてあるi-modeXHTMLで書かれているサイトでは、また書き方が違います。
style="-wap-input-format:＆quot;*＆lt;ja:h＆gt;＆quot;" 全角かなモード
style="-wap-input-format:＆quot;*＆lt;ja:hk＆gt;＆quot;" 半角カナモード
style="-wap-input-format:＆quot;*＆lt;ja:en＆gt;＆quot;" 半角英字モード
style="-wap-input-format:＆quot;*＆lt;ja:n＆gt;＆quot;" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" style="-wap-input-format:＆quot;*＆lt;ja:hk＆gt;＆quot; /＞
style="-wap-input-format:＆quot;*＆lt;ja:hk＆gt;＆quot;" 半角カナモード
style="-wap-input-format:＆quot;*＆lt;ja:en＆gt;＆quot;" 半角英字モード
style="-wap-input-format:＆quot;*＆lt;ja:n＆gt;＆quot;" 半角数字モード
▼こんなかんじ…
＜input type="text" name="hoge" value="" size="12" maxlength="9" style="-wap-input-format:＆quot;*＆lt;ja:hk＆gt;＆quot; /＞
↑※＆は本当は&（半角）です。
さて。これが問題で上記指定を他のキャリアと共存させようとすると問題が発生するようです。
自分では試していないので不確定ですが「SoftBankでは指定が無効になる」やら「SoftBankではデフォルト指定ではなく、他の文字種が入力できなくなる」やら色々と問題があるようです。
そんなこんなで、携帯で全機種の絵文字を表示させる件も然りですが、やはりきちんとした携帯サイトを作るならばキャリア別にページを分けるのが無難だと･･･いうことでしょうか。
なによりも、携帯サイトのキャリア別動作確認は、パソコン上の携帯ビューワーだけでは表示確認の限界があるのが不便なところ。
今回の入力モード切り替えも、ビューワーでは再現できないし。3キャリアだけでなくバージョンによってもかなり表示が変わりますし･･･。
携帯サイト制作は、3キャリア毎に表示・動作確認をしてくれる同僚に協力を得ないときびしいです。
ちなみに･･･こんなサービスもあるようです。
携帯サイト実機テストサービス ケータイテストPro
