【スマホUI最適化】Androidでフォームを数字入力モードに設定する

フィーチャーフォンでは、フォームでテキストを入力する際の文字入力モードをHTMLの属性(istyle=”4″など)で指定できる。文字入力モードは「ひらがな」「カタカナ」「英字」「数字」のように文字種を指定できるから、入力モード切替が煩わしい携帯では切り替えの手間が省け、ユーザビリティが良くなる。

zipcodeではスマートフォンは入力モードに対応しているか?いや、Androidに搭載されたブラウザは標準HTML準拠だからダメに違いない・・・。そう思ってあきらめていた。

が、調べてみるとAndroidブラウザでも数字モードに設定する方法があった。

 

 

 

AndroidはHTML5に一部対応している

Android端末に搭載されたブラウザはHTML4だけではなく、仕様策定中のHTML5にも一部対応している。

そしてHTML5のinput要素では、type属性が拡張され、type=”tel”やtype=”email”といった指定ができるようになっている。

input要素のtype属性 データ型 コントロール
type=”hidden” 任意文字列 なし
type=”text” 改行なしテキスト テキストフィールド
type=”search” 改行なしテキスト 検索フィールド
type=”tel” 改行なしテキスト テキストフィールド
type=”url” 絶対URL テキストフィールド
type=”email” メールアドレスもしくはメールアドレスのリスト テキストフィールド
type=”password” 改行なしテキスト マスクされたテキストフィールド
type=”datetime” タイムゾーンあり日付と時刻(年月日時分秒) 日付と時刻コントロール
type=”date” タイムゾーンなし日付(年月日) 日付コントロール
type=”month” タイムゾーンなし年月 月コントロール
type=”week” タイムゾーンなし年間の週番号 週コントロール
type=”time” タイムゾーンなし時刻(時分秒) 時刻コントロール
type=”datetime-local” タイムゾーンなし日付と時刻(年月日時分秒) 日付と時刻コントロール
type=”number” 数値 テキストフィールド又はスピナーコントロール
type=”range” 数値 スライダーコントロール
type=”color” 8ビットRGBカラー カラーコントロール
type=”checkbox” リスト内の0個以上の値 チェックボックス
type=”radio” 列挙型 ラジオボタン
type=”file” 0個以上のファイル ラベルとボタン
type=”submit” 列挙型 ボタン
type=”image” 座標 押せる画像、又はボタン
type=”reset” なし ボタン
type=”button” なし ボタン

ちなみにinput要素にはpattern属性が新設され、正規表現でヴァリデーションパターンを指定する機能もある。

HTML5で数字入力モードを指定する

ここで数字入力になりそうな属性を指定し、実機で確認してみた(画面はXperia arc)。

form1form2form3

タグ記述 Xperia arc ISW11HT 003SH
<input type=”tel”> 数字 数字 数字
<input type=”number”> 数字 数字 数字
<input type=”range”> 非表示 非表示 非表示
<input type=”text” pattern=”[0-9]{8}”> 日本語 日本語 日本語

すると数字入力モードに切り替わるのは、type属性にtelやnumberを指定したときだった。Xperia arcだとキーボードの配列が電話用に切り替わる。

一方、type=”range”の場合はコントロール自体が非表示となり、Androidでは対応していないようだ。type=”text”でpattern属性を指定した場合は日本語入力モードのままだった。

まと

  • ねこ64
    入力でeメールアドレスを入力してると勝手に単語末尾にスペースが入って消すのに難儀する場合とそうじゃない場合があって不思議だったのですが納得しました。 多分textとemailの違いなんですね。
  • coffee
    textとemailの違いでもなさそうですね。 入力補助から選択するとemailでもスペースが入るようです。
  • koreadays
    >ねこ64さん、coffeeさん コメントありがとうございます。 メールアドレスのように英字入力する際にも何やら課題がありそうですね。 xperia arcではスペースが入る現象が確認できませんでした。 機種依存なのでしょうか?
  • coffee
    IS06とMediasで入力補助の挙動を試しました ■IS06/2.2.1 デフォルトiWnn→スペース入る Android keyboard→スペース入る ■Medias/2.2.1 デフォルトATOK→スペース入らない Android keyboard→スペース入る という結果でした。 もしかしてXperia ArcもPOBoxの処理で スペースが入らないようになっているのかもしれませんね。
  • Pingback: スマートフォンでフォームを数字入力モードに設定する方法がありがてぇ!