JavaScriptでinputの入力可能文字を制限する方法

プログラミング

HTMLのinputタグ(テキストボックス)では、onInput属性により文字が入力される度にJavaScriptの処理を実行し、入力された文字を取得したり編集したりすることができます。
これを利用して、inputの入力可能文字を任意に制限することができます。

以下は、半角数値のみ入力可能とし、それ以外の文字が入力された場合にはテキストボックスに入力された文字を全て削除するサンプルです。

【サンプルコード】

・test.html

【実行確認】

WindowsOS上でChromeバージョン86.0.4240.111で試しています。

0-9(半角数値)はこのように入力できます。

テキストボックスに入力した文字はこのように取得することができます。
(今回はボタン押下で取得し、そのまま表示)

しかし、許可されていない文字を入力しようとすると、テキストボックスの文字が削除され、入力できません。


いかがでしたでしょうか。

入力チェックというと実装が面倒な印象がありますが、このように入力の時点で不正な文字の入力を防止すれば、入力チェックの実装が楽になります。
ちょっとしたページを作る時に便利な方法だと思います。

コメント

タイトルとURLをコピーしました