ios5のsafariでinput typeのnumberでカンマなしで数値を入力させる方法

以前、仕様がかわっていたので、解決するには・・・とかで回避していたのですが、やっぱり number属性であるべきところをtel属性にするのがおかしいというこころ残りがあったのです。
今回、新たな解決方法が紹介されていました。

この問題は
[html]
<input type=’number’ value=’’>
[/html]
とかで「011」や「1001」とか入力すると「11」、「1,000」などで自動変換されるという問題。

number属性を使うと、ソフトウェアキーボードが数字キーボードを表示してくれるということもあり、text属性などを指定してテキストキーボードで入力するよりユーザーにとって操作しやすいという利点もあります。

ということで、

  • 意図した形式で数値を入力したい
  • 数字入力のソフトウェアキーボードを表示させたい

の2点を解決したいわけですが、今回の方法は上記をすべて満たしてました。

それが以下

[html]
<input type="text" pattern="[0-9]"/>
[/html]
または
[html]
<input type="text" pattern="\d
"/>​
[/html]

正規表現で制御してやると、ソフトウェアキーボードも入力できる形式にあわせて表示されるんですね。

iOS 5(iPhone等)の数字入力用inputフィールドでカンマを表示させない方法に紹介されていました。

Comments