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

トレーニングロガーに取り組んでいます 過去6か月間のサイドプロジェクトとしてのアプリ。ご想像のとおり、このようなアプリには数値入力が必要です。

コードエディタでオートコンプリートを使用する場合、入力要素のデフォルトのタイプはテキストです：

<input type="text" />

数値タイプのHTML入力要素は、数値入力のみを受け入れます。この数値入力フィールド内に文字を入力してみてください：

できません。

タイプがtextのHTML入力要素 ただし、テキストと数字の両方を受け入れます。このテキスト入力フィールドに数字と文字の両方を入力してみてください：

はい、機能します！

アプリで担当者とウェイトの入力を最初に宣言したとき、デフォルトの入力タイプをテキストから数値に変更しませんでした。私もそれについて考えていませんでした。デスクトップコンピューターでテストする場合、数字の入力は簡単なので、気になりませんでした。

しかし、iPhone 6でアプリをテストするとすぐに、最初から正しい入力タイプを使用したほうがよい理由が明らかになりました。

入力要素のタイプがテキストに設定されていて、その入力フィールド（少なくともiPhone）をクリックすると（Androidでも同様だと思います）、ネイティブキーボードがポップアップ表示されます。誰かにテキストメッセージを書いているかのように。

このように：

現在、このネイティブキーボードを使用すると、数字にアクセスできますが、最初に、123ボタンをクリックする必要があります。これにより、不要な手順が追加されます。

担当者の数と持ち上げられた体重を追加することが唯一の目的である入力フィールドの場合、スマートフォンの数字キーボードをポップアップすることだけが意味があります。

これを行うには、入力要素が数値入力を受け入れるように指定するだけです。

このように：

<input type="number" />

そしてその結果（iOSデバイスの場合）：

これですべてです。