iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。
例 :
<input type="text" pattern="\d*">
とします。
もちろん
<input type="number" pattern="\d*">
でもOKです。
iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは
フォームのフォントサイズが16pxより小さい
の時に起きます。
そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。
input,select,textarea{ font-size:16px; }
例:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更(下記の例では等倍)できます。
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
いくら viewport で user-scalable=no を設定していても JavaScriptでフォームに強制的にフォーカスした時は画面が拡大されることがあります。
その時は
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); $("#hoge").css("font-size",'16px'); $("#hoge").trigger("focus"); $("#hoge").css("font-size",'');
とやって無理やり16pxにするという方法で回避できます。