フォームに数字以外を入力したくない時ってありますよね？
クライアントからの依頼で、これに対応しようとして、散々苦労したことがありましたので、こちらにメモしておこうと思います。
普通に考えると…
0123456789だけを入力できるようにすればいい！
ってなるんですが、実はこれだけでは、「全角入力」のキーはすべて素通りで入力できてしまいます。
概要
●input type属性はtelにする
これにより、スマートフォンでは数字以外が入力できなくなります。
（ただしコピペされたら素通り）
●jQueryで全角入力を制御する。
これにより、PCで半角数字以外が入力された時に弾きます。
input type属性をnumberにしない理由 その１
number属性だと、スマートフォンではなんでも入力できてしまいます。
input type属性をnumberにしない理由 その２
パソコンで、↑、↓を押してしまうと値が変わってしまいます。
jQueryで全角入力を制御
下記のようなコードを入力します。
#formfieldidは環境に合わせて書き換えてください。
記載する場所ですが、プラグイン「Simple Custom CSS and JS」 がオススメです。
$(document).on('keydown', '#formfieldid', function(e){
let k = e.keyCode;
let str = String.fromCharCode(k);
if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46 || k ===13)){
return false;
}
});
$(document).on("keyup","#formfieldid", function(e){
this.value = this.value.replace(/[^0-9]+/i,'');
});
$(document).on("blur","#formfieldid", function(e){
this.value = this.value.replace(/[^0-9]+/i,'');
});