jQueryでinputに半角数字のみ入力を許可する


業務用ソフトの入力補助などで半角数字のみ入力許可したい時がある

そういった時にjQueryのinputイベントがかなり役に立つ

手法としては、inputイベントで現在の入力値を変換できる限り変換してあげれば良い

HTML

<input id="num-input" type="tel" />

Javascript

$('#num-input').on('input', function() {
    // 半角変換
    var halfVal = $(this).val().replace(/[!-~]/g,
        function (tmpStr) {
            // 文字コードをシフト
            return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
        }
    );
  // 数字以外の不要な文字を削除
  $(this).val(halfVal.replace(/[^0-9]/g, ''));
});

まず半角に変換できる文字を変換し、変換できない文字は削除する。

そうすることで最終的には半角数字のみが残るようになる。

マイナス符号なども許可したい際には正規表現の部分を適宜変更すれば簡単に様々なフォーマットに対応することができる

まとめ

inputイベント便利すぎ

jsFiddleにも置いているので試してみてください

https://jsfiddle.net/7e8xjzue/


この投稿へのコメント

コメントはありません。

コメントを残す

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL