HTMLのinput要素でスマートフォンに数字キーボードを表示させる方法

私はここ半年間、サイドプロジェクトとしてトレーニング記録アプリを開発しています。ご想像のとおり、この種のアプリには数値の入力が欠かせません。

コードエディタのオートコンプリート機能を使うと、input要素のtype属性はデフォルトで「text」になります。

<input type="text" />

type="number" と type="text" の違い

type属性が「number」に設定されたHTMLのinput要素は、数値のみを受け付けます。この数値入力フィールドに文字を入力してみてください。

入力できませんよね。

一方、type属性が「text」のinput要素は、文字も数字も両方受け付けます。テキスト入力フィールドに数字と文字を入力してみてください。

はい、問題なく入力できました!

デスクトップでは気づきにくい問題

私が最初にアプリで回数(rep)と重量(weight)の入力欄を作ったとき、input要素のtype属性をデフォルトの「text」から「number」に変更していませんでした。そもそも考えることすらありませんでした。デスクトップPCでテストしている限り、数字の入力は簡単なので、特に気にならなかったのです。

しかし、iPhone 6でアプリをテストした瞬間、なぜ最初から正しいinputタイプを使うべきなのかが明白になりました。

input要素のtype属性が「text」に設定されている場合、その入力フィールドをタップすると、少なくともiPhoneでは(Androidでも同様だと思われます)、通常のテキストキーボードが表示されます。まるで誰かにメッセージを送るときのように。

こんな感じです:

このネイティブキーボードでも数字を入力することはできますが、まず「123」ボタンをタップしなければなりません。これでは余計な一手間が発生してしまいます。

解決策:type="number" を指定するだけ

回数や挙げた重量を入力するためだけの入力フィールドなら、スマートフォンでは数字キーボード(テンキー)が表示されるのが自然です。

そのためには、input要素が数値入力を受け付けることを指定するだけでOKです。

こんな感じです:

<input type="number" />

iOS端末での表示結果はこちら:

以上で完了です!たった一行の変更だけで、モバイルユーザーの入力体験は大きく向上します。フォームを作る際は、用途に合った適切なtype属性を最初から指定する習慣をつけましょう。