5000164 is here
2012-10-15

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

 

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

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

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

 

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

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

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

賢いですね。

 

というわけで、実演

 

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

 

以下、参考

 

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

http://www.webcreatorbox.com/tech/smartphone-snippets/

 

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

http://www.html5.jp/tag/elements/input.html

 

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

http://www.site-cooler.com/kwl/javascript/15.htm