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

  • jQuery

フォームの 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 );
});

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

参考