入力フォームを数字キーボードに設定するには？

入力フォームを数字キーボードに設定するには？

フィーチャーフォンでは、フォームでテキストを入力する際の文字入力モードを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属性を指定した場合は日本語入力モードのままだった。

関連記事：

Page Top