JavaScriptでinputタグに入力する文字に制限を付けたい

電話番号やパスワードなどinputタグに入力できる文字の種類を制限したいとき、
開発現場でシンプルに実装しているものを見つけて勉強になったのでメモ。

結論

・inputイベントで入力されたテキストが許可しない文字の場合、空文字に置換すればよい。
・許可しない文字はreplace()の引数に正規表現で設定する。

hoge.html

<input type="text" name="number" oninput="value = onlyNumber(value)" placeholder="半角数値のみ">
<input type="text" name="number-hyphen" oninput="value = onlyNumberHyphen(value)" placeholder="半角数値ハイフンのみ">
<input type="text" name="alpha-number-symbol" oninput="value = onlyAlphaNumberSymbol(value)" placeholder="半角英数記号のみ">

<!-- イベントで実行する処理を定義したjsファイル -->
<script src="hoge.js"></script>

hoge.js

const onlyNumber = val => {
    return val.replace(/\D/g, '');
}

const onlyNumberHyphen = val => {
    return val.replace(/[^\d-]/g, '');
}

const onlyAlphaNumberSymbol = val => {
    return val.replace(/[^\w-]/g, '');
}

補足

・キーボード入力とコピー&ペーストに対応できることを確認済み
・oninput属性で"value = hogeFunc()"とするとhogeFunc()の戻り値がvalue属性に設定されるらしい
・参考にした記事