jQuery で 全角（2バイト）文字を入力できないようにする

フォームの textarea や input で、入力された文字が全角（2バイト）文字だった時に削除する方法です。半角英数字のみ入力させたいような場合に使えると思います。jQuery を使用するので、事前に読み込んでおいてください。

関数

/**
 * 2バイト文字を除外する
 * @param {string} obj 適用する要素名
 */
function removeFullwidth( obj ) {
     var noSbcRegex = /[^\x00-\x7E]+/g; 
     var target =  $( obj );
     if(!target.val().match(noSbcRegex)) return;
         window.setTimeout( function() {
         target.val( target.val().replace(noSbcRegex, '') );
     }, 1); 
}

使用例

上記の関数を読み込んだ後で、イベントを付与します。
クラス「only-single-byte」が付与されている場合、input, change, paste 時に全角文字が含まれていたら消します。イベント名（ input, change, paste ）は適当なものに設定してください。jQuery('.only-single-byte')でセレクタを指定します。

<input type="text" class="only-single-byte" name="sample-text">

$('.only-single-byte').on('input change paste', function(){
     removeFullwidth( this );
});

もうちょっとクールにかける方法はないものか、と常日頃考えてますが、既存サイトへの部分的な修正だとどうも難しいところです。

参考