jQueryでinputに数字のみ入力させるための本当に正しい方法

inputには絶対に半角数字しか入力させたくないってことありますよね？

検索してみるとそのためのコードがいくらでも出てくると思いますが、実は厳密に0～9以外は入力不可にしたいとなると結構大変です。

ということでその方法について紹介します。

このページの目次

何も考えずにコードを書くとこうなる
削除とか矢印の制御キーは入力可にする
全角文字を入力不可にする
全体のコード
inputでの入力制限についての関連記事

何も考えずにコードを書くとこうなる

例えばなんでもいいので次のような input があるとしましょう。

<input type="text" class="input_number_only">

1	<input type="text" class="input_number_only">

この中で半角数字のみを入力できるようにしたいわけです。

そういう場合にまず思いつくのは次のようなコード

jQuery(document).on('keydown', '.input_number_only', function(e){
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/))){
    return false;
  }
});

jQuery(document).on('keydown', '.input_number_only', function(e){

let str = String.fromCharCode(k);

if(!(str.match(/[0-9]/))){

return false;

}

});

正規表現使っているし、数字以外は入力できない、完璧！

・・・と思ってしまいますがこのコード実は色々問題があります。

何が問題かというと次の２点

矢印キーとか削除キーも入力できなくなる
全角入力は普通に入力できちゃう

そもそも keydown というイベントタイプは半角文字が押された時しか動かないので全角は入力し放題です。

しかもその上、矢印キーとか削除キーとかの文字でないもの( = 制御キー )も入力できなくなってしまうのですごく不便になります。

そういう訳で普通に半角数字をフィルターするだけじゃダメなんですね。

じゃあどうやって制御キーとか全角を入力するの？、という話ですがちゃんと解決策はあるので、色々コードを紹介していきます。

削除とか矢印の制御キーは入力可にする

ではまずは半角数字に加えて制御キーを入力可にしてみるコードです。

そのコードは次のとおり

jQuery(document).on('keydown', '.input_number_only', function(e){
  let k = e.keyCode;
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46)){
    return false;
  }
});

jQuery(document).on('keydown', '.input_number_only', function(e){

let k = e.keyCode;

let str = String.fromCharCode(k);

if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46)){

return false;

}

});

４行目で矢印キー( ASCIIでは37 ～ 40の間 )とバックスペースキー( = 8 )とデリートキー( = 46 )を入力可能にしています。

他にも制御キーはエンターとかシフトとかありますが、数字のみの場合はあまり気にする必要はないですね。

ちなみにASCIIでの制御キーの値は次のサイトで一覧が確認可能

https://www.k-cube.co.jp/wakaba/server/ascii_code.html

もし必要ならエンターキーとかも入力可にするといいかもしれないです

全角文字を入力不可にする

さっき紹介したように、普通に keydown で数字のみ判別すると全角文字も入力できちゃうんです。

なのでそれを防ぐために必要なのが次のコード

jQuery(document).on('keyup', '.input_number_only', function(e){
  this.value = this.value.replace(/[^0-9]+/i,'');
});

jQuery(document).on('blur', '.input_number_only',function(){
  this.value = this.value.replace(/[^0-9]+/i,'');
});

jQuery(document).on('keyup', '.input_number_only', function(e){

this.value = this.value.replace(/[^0-9]+/i,'');

});

jQuery(document).on('blur', '.input_number_only',function(){

this.value = this.value.replace(/[^0-9]+/i,'');

});

やってることは単純で keyup(キーが押された後) あるいは blur(inputからフォーカスが外れた後) が起きた時に半角数字以外を空文字に置き換えているだけです。

全角文字っていうのは半角と違ってエンターが押されて確定されるまではイベントは起きないようです。

なので確実に数字のみ入力にしたいならこういう処理も必要ですね。

全体のコード

ということでここまでで紹介してきたコードの全体像はこうなっています。

jQuery(document).on('keydown', '.input_number_only', function(e){
  let k = e.keyCode;
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46)){
    return false;
  }
});

jQuery(document).on('keyup', '.input_number_only', function(e){
  this.value = this.value.replace(/[^0-9]+/i,'');
});

jQuery(document).on('blur', '.input_number_only',function(){
  this.value = this.value.replace(/[^0-9]+/i,'');
});