携帯サイトで入力フォームの文字を固定する方法
携帯サイトで文字入力が必要なフォームを設置する際に、どうしても半角英数やカタカナ入力に固定したい場合があります。全キャリアで記述内容が異なるため、厄介な仕様になりますが、解決方法を紹介します。
各キャリアごとの入力モードの指定方法
入力モードの指定は、各キャリアごとに記述方法が異なる上に、HTMLとXHTMLでも別の記述を求められます。
docomo(i-mode)の場合
HTML
全角かな:<input type="text" name="bar" value="" istyle="1"> 半角カナ:<input type="text" name="bar" value="" istyle="2"> 英字/半角文字:<input type="text" name="bar" value="" istyle="3"> 数字/半角文字:<input type="text" name="bar" value="" istyle="4">
XHTML
全角かな:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:h>"" /> 半角カナ:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:hk>"" /> 英字/半角文字:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:en>"" /> 数字/半角文字:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:gt>"" />
au(EZweb)の場合
HTML
英大文字:<input type="text" name="bar" value="" format="A"> 英小文字:<input type="text" name="bar" value="" format="a"> 数字:<input type="text" name="bar" value="" format="N"> 英大文字と数字記号:<input type="text" name="bar" value="" format="X"> 英小文字と数字記号:<input type="text" name="bar" value="" format="x"> 全角漢字:<input type="text" name="bar" value="" format="M"> 半角英小文字:<input type="text" name="bar" value="" format="m">
XHTML
全角かな:<input type="text" name="bar" value="" style="-wap-input-format:*M;" /> 半角英字:<input type="text" name="bar" value="" style="-wap-input-format:*m;" /> 半角数字:<input type="text" name="bar" value="" style="-wap-input-format:*N;" />
Softbank(Y!ケータイ)の場合
HTML
全角かな:<input type="text" name="bar" value="" mode="hiragana"> 半角カナ:<input type="text" name="bar" value="" mode="katakana"> 英字/半角文字:<input type="text" name="bar" value="" mode="alphabet"> 数字/半角文字:<input type="text" name="bar" value="" mode="numeric">
XHTML
全角かな:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:h>"" /> 半角カナ:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:hk>"" /> 英字/半角文字:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:en>"" /> 数字/半角文字:<input type="text" name="bar" value="" style="-wap-input-format:"*<:ja:gt>"" />
【解決方法】全キャリア共通で記述したい場合
各キャリアごとにページを分けずに、共通の記述で済ませたい場合は、複数の属性を併用して記述します。一つのinputに対して、かなり複雑な記述を求められるので、必ず実機で動作確認をしましょう。
- 注意点1
- 以下の記述の中でセミコロンを連続して記述[;;]する場所があります。
- 注意点2
- Softbankは[-wap-input-format]を使用した場合、入力制限モードになり、指定した入力モード固定になってしまいます。
XHTML
▽全角ひらがな入力モードにしたい場合 <input type="text" name="bar" value="" istyle="1" format="M" mode="hiragana" style="-wap-input-format:"*<ja:h>"; -wap-input-format:*M;" /> ▽半角カナ（AUは全角）入力モードにしたい場合 <input type="text" name="bar" value="" istyle="2" format="M" mode="hankakukana" style="-wap-input-format:"*<ja:hk>"; -wap-input-format:*M;" /> ▽半角英数入力モードにしたい場合 <input type="text" name="bar" value="" istyle="3" format="m" mode="alphabet" style="-wap-input-format:"*<ja:en>"; -wap-input-format:*m;" /> ▽半角数字入力モードにしたい場合 <input type="text" name="bar" value="" istyle="4" format="N" mode="numeric" style="-wap-input-format:"*<ja:n>"; -wap-input-format:*N;" />
入力モードの初期値を制御しつつ、Softbankの入力制限モードを回避するには、キャリア判別を行いHTMLの内容を切り替える必要があります。残念ながら、動的な処理を使わずに全キャリア共通で使える方法はないようです。
携帯サイトリファレンス
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |