TextBoxに数字しか入力できない2つの解決策
解決策1:HTML5のinput要素のtype属性をnumberに設定することで
input要素のtype属性をnumberに設定することで、ユーザーが数字のみを入力できるように制限することができます。例えば:
<input type="number" />
このように、ユーザーはこのテキストボックスに数字しか入力できず、非数字の文字を入力するとブラウザが自動的にそれを取り除きます。
方法2:JavaScriptのイベントリスナーと正規表現のマッチングを使用する
テキストボックスの入力イベントをJavaScriptでリッスンし、正規表現マッチングでユーザーの入力が数字かどうか判断できます。例:
<input type="text" id="textbox" />
<script>
var textbox = document.getElementById("textbox");
textbox.addEventListener("input", function() {
var value = textbox.value;
value = value.replace(/[^\d]/g, ""); // 使用正则表达式匹配非数字字符并替换为空字符串
textbox.value = value;
});
</script>
ユーザーがテキストボックスに文字を入力すると、inputイベントが発生し、正規表現で数字以外の文字を空文字に置き換えて、処理された文字列をテキストボックスに戻します。これにより、ユーザーは数字のみを入力できます。