フォームの入力を数値に限定、かつスマートフォンでは数字キー入力にする

かなり凝ったオーダーフォームの制作案件で、郵便番号や電話番号等をバリデーションで数値に制限（数値以外はエラーを出す）するのではなく、入力そのものを数値に限定したいとのご要望が有り、少し考えてみました。

先ず、HTML5の場合はインプットのタイプでnumberを指定する事が出来ます。メーカーや端末、ブラウザによって対応が違うようですが、スマートフォンではテンキーが出てくるので入力が楽になります。

<input id="number-1" name="number-1" type="number">

ただ、パソコンの場合、ブラウザの対応によって余計な上下アイコンのようなものが横に付いてしまいます。

作成しているオーダーフォームはレスポンシブデザインなので、プラットフォーム別にUIを用意するのは面倒です。

どうにかならないか？と考えた結果、PCの場合はJavascriptで数値キー以外を無効化し、スマートフォンの場合はinput typeを変更する、という方法にしました。

もちろん、上述したようにスマートフォンによっては対応出来ないケースもあるようなので、完全では有りませんが。

サンプル

  $(document).ready(function(){
    type_change();
    $(window).resize( type_change );
  });
  function type_change(){
    if( $(window).width() < 768 ){
        $("#number-2").get(0).type = 'number';
    }else{
        $("#number-2").get(0).type = 'text';
    }
  }
  function key_down(get_code){
    if( $(window).width() > 768 ){
       if( (get_code >= 48 && get_code <= 57) || (get_code >= 96 && get_code <= 105) || get_code == 144 || get_code == 8 ){
           return true;
       }else{
           return false;
       }
    }
  }

    <input id="number-2" name="number-2" type="text"
           onkeydown="return key_down(event.keyCode)">

PCとスマートフォンの判定はUAを見て分岐する方が確実ですが、これは単純にブラウザの幅によって変更しています。

一応手持ちの端末では期待した動作はしますが、HTML5自体がブラウザによって対応がまちまちなので、参考程度に。