[JS]inputに半角数字のみ入力させたい！（全半変換付）

inputに数字のみ入力させたい時、type=”number”を使ってますか？

このtype=”number”、実は数字以外に+（プラス）と-（マイナス）、.（小数点）あとe（指数表記）を入力することができます。

整数しか想定していないシステムにこれらの文字が入力されるとエラーの原因になってしまいます。そこでjsで半角数字のみ入力できるように、ついでに全角数字を自動で半角数字に変換するコードを追加してみます。

全角→半角変換付き数字だけ入力できるフィールド

<input type="text">
↓
<input type="text" oninput="value = value.replace(/[０-９]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/\D/g,'');">

順に見ていきましょう。

type="text"

矢印（スピンボタン）が表示されないよう”text”にしてあります。今回はjs側で入力制限をするので問題ありません。

oninput=" ~~ "

フィールドに入力された時にjsを実行します。

value = value.replace(/[０-９]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/\D/g,'');

inputの内容を処理をして上書きします。

replaceが２回続けて実行されていますが、１回目が「０〜９（全角数字）を見つけて半角数字に変換」、２回目に「数字以外を削除」をしています。

関数化

入力制限をしたいフィールドが複数ある場合は関数化して簡単に呼び出せるようにします。

HTML
<input type="text" oninput="value = onlyNumbers(value)">

JS
const onlyNumbers = n => {
    return n.replace(/[０-９]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/\D/g,'');
}

おまけ：電話番号バージョン

全角→半角変換とハイフンと数字のみ入力

return n.replace(/[０-９]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[ー−]/g,'-').replace(/[^\-\d]/g,'');