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で対応違うし…ブラウザ違えばもっと違うし…)