jQueryでinputに半角英数字だけ入力させるには？正しいやり方

jQueryを使って input の入力文字を半角英数字だけに制限したいとき、ありますよね？

例えばログインフォームを作ってユーザー名とかパスワードを半角だけにしたいときとか

という訳でここではそのためのコードの書き方について自分なりに少しまとめてみます。

このページの目次

とりあえず深く考えずに書いてみる
制御キーを入力できるようにする
全角文字を入力禁止にする
ここまでのコードまとめ
inputでの入力制限についての関連記事

とりあえず深く考えずに書いてみる

まず次のように input で作ったテキスト欄があるとしましょう。

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

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

そしてこの中で半角英数字だけ入力という条件で思いついたのが次のコード

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

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

let str = String.fromCharCode(k);

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

return false;

}

});

うん、正規表現使っててコードも簡潔だし完璧！

・・・と思ってしまいますが、実はこれだと色々問題があるんですよね。

その問題は何かっていうと次のようなこと

制御キーが押せない
Shiftで大文字入力できないし、矢印キーでカーソル移動もできない
全角文字が入力できてしまう
keydown は全角入力では働かないので全角文字は入力し放題

こういう問題があるから実は完璧そうに見えてすごくザルです。

という訳でこれを解決するためのコードを紹介していきます。

制御キーを入力できるようにする

制御キーっていうのは矢印キーとかシフトとかエンターとか削除とか文字として表示されないキーのこと

そしてそれを入力できるように改善したのが次のコードです。

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

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

let k = e.keyCode;

let str = String.fromCharCode(k);

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

return false;

}

});

このコード中で半角英数字のチェックに加えて付け加えたのは次のような条件

大文字入力のためにシフトキーの入力可
シフトが押されると e.shiftKeyがtrueになるのでそれで判断
カーソル移動できるように矢印キーを入力可
キーコードで判断。 37 <= k && k <= 40 までの部分
削除とデリートキーを入力可
キーコードで判断。 k === 8 || k === 46 までの部分

他にも制御キーはありますが、利便性を考えればこれだけで十分です。

ちなみに制御キーコードについては次の記事で詳しく載っているのでそちらをどうぞ

http://faq.creasus.net/04/0131/CharCode.html

全角文字を入力禁止にする

次に必要なのが全角文字の入力禁止でそれが次のコード

jQuery(document).on('keyup', '.input_alphanumeric', function(e){
  if(e.keyCode === 9 || e.keyCode === 16) return;
  this.value = this.value.replace(/[^0-9a-zA-Z]+/i,'');
});

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

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

if(e.keyCode === 9 || e.keyCode === 16) return;

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

});

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

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

});

全角の場合、keydown だとイベントを受け取れません。

なので keyup(キーが押された後) と blur(テキスト欄からフォーカスが外れた後) が発生したら全角英数字以外を全て空文字に置き換えています。

全角だとこういう処理を挟まないとダメなんですよね・・・

これについてはもっといい方法あるかも。もしあったら教えてください。

ここまでのコードまとめ

ここまでのコードの全体像は次の通り

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

jQuery(document).on('keyup', '.input_alphanumeric', function(e){
  if(e.keyCode === 9 || e.keyCode === 16) return;
  this.value = this.value.replace(/[^0-9a-zA-Z]+/i,'');
});

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