# モバイル端末で数字のみ入力させたい時のハック

みなさんご存知のHTMLですが、僕はまだまだ知らないことばかりで翻弄されてます。canvasとか、svgとか・・・

で、今回はHTMLのフォームでよくある 「数字のみを受け付けるinputフォーム」 の作り方をご紹介します。

# input[type="number"] では文字入力を禁止できない！

ユーザーIDの入力や二段階認証の番号入力など、フォーム内に数字だけを入力させたいという要望は、実務に限らず個人開発でもよくありますよね。

そんな時、よく使われるのは input[type="number"] 。むしろそれ以外が選択肢に上がるなんて考えたこともないなんて人も少なからずいるんじゃないかな？

しかし、なんと input[type="number"] は、モバイル端末での文字入力を禁止することができません。

今回の僕のタスクは「数字しか入力できないようにする」なので、 input[type="number"] では機能が不足してるんですね。

<input type="number" placeholder="number">

JSで「数字以外が入力されたらはじく」といったことも可能なんだけど、できればHTMLの力だけで簡単に解決したいし、ユーザーに違和感のない形で間違いを減らしてあげたいところ。

TIP

input[type="number"] はキーボードの初期値を数字入力にしてくれる効果があります。ただしキーボードの切り替えは自由にできてしまうため、今回の要件（数字のみ入力）を満たすことができず惜しかった。

もったいぶるような内容でもないので見出しに答えを書いてしまいましたが、 number の代わりに tel を使います。

すると電話番号入力用のキーボードに固定されるため、数字入力を強制できるというわけです。

<input type="tel" placeholder="tel">

いくら入力方法を強制したからといって、サーバーに送信するデータを強制したわけではないので、バリデーション（入力値の検証）を省略していい理由にはなりません。

ユーザーが入力したデータは、必ずサーバサイドでバリデーションしましょう。