iOS 5(iPhone等)の数字入力用inputフィールドでカンマを表示させない方法

type=numberの入力フィールドにカンマが入る

10月にApple iOS 5がリリースされ、早速お手持ちのiPhone/iPadなどをマイグレーションした方も多いでしょう。私もその一人なのですが、Safariを使っていてある困った「変更」にすぐ気付きました。

ブラウザ内で数字を入力させるためのフィールドで、3桁毎に勝手にカンマが入る

この件については、id:oogattaさんの記事に記載があります。

iOS5 で type="number" の input 要素に数字を入力した時の処理が仕様により即したものになったようで、単純に言うと、本当に「数字・実数」にのみ使うものになった。例えば！郵便番号には！使えない！

俺！仕事で！郵便番号に！使ってた！！

047

とか入力するとなんと 47 にされるし、

1408

とか入力すると 1,408 とコンマが入ったりする。

http://d.hatena.ne.jp/oogatta/20111114/1321249242

私の場合は、JDKインストールなしでJava開発をできる入門学習用のサービス Dokojavaにおけるキャプチャ入力画面でSenchaToucha経由でinput=numberのフィールドを使っていたのですが、そこにカンマが入るようになってしまいました。

入力中には数字は入らず、OKボタンを押した直後に一瞬カンマが入るだけなのですが、やはり気持ち悪いです。

代替策を考える（１）

じゃぁどうするか。まず考えつくのが単にinput=textにする方法。

これは英字やカナも入力できてしまうというのが多少気にくわないけれども、キャプチャという目的上問題はありません。この方法の最大の問題は、

フォーカスがあたった際にiPhoneが表示するキーボードが、数字キーボードではないということ

利用者は、いちいち数字キーボードに切り替える操作をしなければなりません。

代替策を考える（２）

で、ネットを彷徨ってると別の代替策が。

なんとかこれを回避しつつ数字だけ入力する上手い方法ないかなーと思ってたらtype="tel"にすればいいよ！って書いてる人がいました。

うん…それも…どうだろう…。

http://d.hatena.ne.jp/tm8r/20111202/1322797016

id:tm8rさんの感覚は正しいと思います。

できるかできないかと、やっていいかいけないかは別問題。
セマンティック方面から電話関連機能を活用するような応用の道を閉ざすことになりますから、キャプチャ入力のためにtype=telは使いたくありません。

数字キーボードは出すけど、カンマは出さない方法

で、辿り着いたのが以下の方法です。

<input type="text" pattern="[0-9]*"/>

または

<input type="text" pattern="\d*"/>

type="text"なので、英数字(orカナ)キーボードが表示されそうなものですが、正規表現による英数入力制約がかかってることを解釈して、ちゃんと数字のキーボードを出してくれます。

ちなみに

<input type="text" pattern="[1-9]*"/>

とかにすると、「数字キーボードが出て、しかも0だけ押せなくなってる」ような賢いことが起きるのかなぁと想像したのですが、残念ながらそうはならず、かなキーボードが表示されました。

まとめ

iOSで数値ではなく「数字の列」を素早く入力させたい場合、
type=textとしてpatternで制約をかければよい