iOS のブラウザで数字のみのキーボードを出す

iOS のブラウザにおいて数字のみのキーボードを出したいときがあります。
しかし、 input type="number" ってやっても数字以外のキーがでてきてしまう。
そうだ、 input type="tel" ってやれば数字のみになる、しかしセマンティックではない。

そこで、 input type="text" pattern="\d*"

HTML5 からは入力文字を pattern で正規表現を利用して制御できるようになりました。
そこで入力可能文字を数字のみにすると iOS で数字のみのキーボードを出してくれるというものです。
賢いですね。

というわけで、実演

<input type="number">
input type 1
<input type="tel">
input type 2
<input type="text" pattern="\d*">
input type 3

以下、参考

菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
今、おれの中でこれが熱い!VOCALOIDランキング 10/15日版
Previous Post
車の何とも言えない違和感のある走り方について考えた
Recent Posts
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想
Android の Chrome で通知の許可設定がタップできない
生きることが難しい
服を買うということ - 映画「The True Cost」の感想