フォームとモバイル端末のソフトウェアキーボード

/ MEMO / Tag:

フォームのinput要素と、モバイル端末(iPhone/iPad/Android)で表示されるソフトウェアキーボードについて調査しました。

input要素のtype属性

type="email"

・inputの属性をemailにしてもfocus時に英語キーボードにならない端末が多いようです。
・iPhoneではスペースキーの横に@とドットが配置されます(英語キーボード時)。

type="tel"

・focus時、テンキー入力に切り替わります。

type="number"

・focus時、テンキー入力に切り替わります。
・submit時、「0」で始まる数字は自動的に「0」が省略されてしまいます(Safari 5以降)。
・submit時、自動的に3桁ごとにカンマが挿入されてしまいます(Safari 5以降)。

その他のtype属性について

・今回の記事では省略します。

その他の留意点

pattern属性

・pattern属性で正規表現でバリデーションすることが可能ですが比較的新しいブラウザのみ対応(HTML5)。patternが有効なtype属性はtext search url tel email password。

スマートフォンのテンキー

・Android/iPhoneともにテンキー入力時にはハイフンのボタンが表示されません。
・ハイフンを入力するにはキーボードの切り替えが必要になります。

英語キーボードへの強制切り替え

すべての環境で英語キーボードへ強制切り替えできるtype属性はないと思われます。

カタカナの入力

・ひらがなで入力してからカタカナへ変換する必要があります(入力ステップ増)

参考: input要素のpattern属性

・正規表現による指定の例(数字のみの入力)


画面のキャプチャー

iPad-iOS7
初期状態「日本語ローマ字」
text

日本語。入力方式(ローマ字/かな)は初期状態によります
tel

テンキー
email

日本語。自動で英語には切り替わりません。日本語・英語ともスペースの横に@と.のボタンが追加されます

iPad-iOS9
初期状態「日本語ローマ字」
text

日本語。入力方式(ローマ字/かな)は初期状態によります
tel

テンキー
email

日本語。自動で英語には切り替わりません。日本語・英語ともスペースの横に@と.のボタンが追加されます

iPhone-iOS7
初期状態「日本語かな」
text

日本語。入力方式(ローマ字/かな)は初期状態によります
tel

テンキー
email

日本語(画像上)。自動で英語には切り替わらない。英語に切り替えるとスペースの横に@と.のボタンが追加されます(画像下)

iPhone-iOS9
初期状態「日本語かな」
text

日本語。入力方式(ローマ字/かな)は初期状態によります
tel

テンキー
email

日本語(画像上)。自動で英語には切り替わらない。英語に切り替えるとスペースの横に@と.のボタンが追加されます(画像下)

Nexus7(2013)-Android4.3
初期状態の入力モード「ひらがな漢字」、デフォルトIME「iWnn IME」
text

日本語
tel

テンキー
email

英語(入力モード「半角英数」)

GalaxyS2-Android2.3
初期状態「漢かな」
text

日本語
tel

テンキー
email

日本語。英語に切り替えても@は表示されないのでさらに数字に切り替える必要があります

GalaxyS3-Android4.0
初期状態「ひらがな漢字」
text

日本語
tel

テンキー
email

日本語。英語に切り替えても@は表示されないのでさらに数字に切り替える必要があります

まとめ

おすすめの対応
  • 郵便番号の入力欄…ハイフンを入力しない形式を検討。type属性にnumberを使用しない
  • 電話番号の入力欄…ハイフンを入力しない形式を検討。type属性にtelを使用(この場合はテンキーにハイフンのボタンがない)。
  • eメールの入力欄…type属性にemailを指定、またはtextを指定しJavaScriptなどでバリデーション
  • カタカナの入力欄…ひらがな入力とするか、JavaScriptなどでひらがなをカタカナに自動変換
  • バリデーション…pattern属性に未対応のブラウザが多いためJavaScriptなどで対応