5000164 is here
2012.10.15

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

iOSのブラウザにおいて数字のみのキーボードを出したいときがあります。

しかし、input type=”number”ってやっても数字以外のキーがでてきてしまう。

そうだ、input type=”tel”ってやれば数字のみになる、しかしセマンティックではない。

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

HTML5からは入力文字をpatternで正規表現を利用して制御できるようになりました。

そこで入力可能文字を数字のみにするとiOSで数字のみのキーボードを出してくれるというものです。

賢いですね。

というわけで、実演

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

以下、参考

少しのコードで実装可能な15のスマートフォンサイト用小技集 | Webクリエイターボックス

input 要素 – フォーム – HTML要素 – HTML5 タグリファレンス – HTML5.JP

JavaScript講座 15章 JavaScriptでの正規表現