iOS5だとinput type="number"で桁区切りカンマが入ってしまう対策

HTML5でinput type="number"を指定すると,iOSでもAndroidでも数字入力モードになってくれるので便利!
しかしiOS5だと数字列が欲しいのに数値になってしまうので先頭の0が省略されたり,桁区切りのカンマが入ってしまうことも確認!
こりゃ困るねーということで対応をググった.

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

type="text"にしてpatternを指定すれば良い,と.
確かにその通りでしたが,Androidは数字入力モードにならない.

ということで結果下記のような対応を取ってみることに

html部分
<input type="number" id="num" />←Android向け
<input type="text" id="num2" pattern="[0-9]*" />←iOS向け

JavaScript部分(jQuery前提)
var agent = navigator.UserAgent;
if(agent.search(iPhone|iPad|iPod) != -1){
 $(‘#num’).remove();
 $(‘#num2’).attr(‘id’,’num’);
}else{
 $(‘#num2’).remove();
}

ムリヤリ感ありますが…
Androidもnumberを数値として扱い始めると先頭が0の場合は話が違ってくるしなぁ.
というかブラウザ毎にこういうの意識するのは基本的にはイヤだなぁ…(iOSも4と5で対応違うし…ブラウザ違えばもっと違うし…)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください