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

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

2019-04-04
JavaScriptjQuery

入力フォームに数値しか入れさせたくない場合にそれなりの制御をjQueryで行いたい。

こんな感じでどうだろうか。

html

<input id="text" type="text">

JavaScript

$(function() {
    $('#text').on('input', function(e) {
        let value = $(e.currentTarget).val();
        value = value
            .replace(/[０-９]/g, function(s) {
                return String.fromCharCode(s.charCodeAt(0) - 65248);
            })
            .replace(/[^0-9]/g, '');
      	$(e.currentTarget).val(value);
    });
});

入力自体は基本受け付けてinputイベント時に全角数字は半角数字に変換、

その後半角数字以外を取り除くようにする

IMEがONになっているとIMEの表示が若干ちらつくがこの方法がシンプルでいいんじゃないかと思う。