-
HTMLのinput要素を使用する方法:
<input type="text" pattern="[0-9]*" title="数字のみ入力してください" required>
上記のコードでは、
pattern
属性を使用して正規表現パターン[0-9]*
を指定し、数字のみを受け付けるようにしています。 -
JavaScriptを使用する方法:
<input type="text" id="numberInput" required> <script> const numberInput = document.getElementById('numberInput'); numberInput.addEventListener('input', function() { this.value = this.value.replace(/[^0-9]/g, ''); }); </script>
上記のコードでは、JavaScriptを使用して入力された値から非数字を削除する処理を行っています。
input
イベントが発生した際に、replace
メソッドを使用して非数字を空文字列に置き換えています。 -
jQueryを使用する方法:
<input type="text" id="numberInput" required> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#numberInput').on('input', function() { $(this).val($(this).val().replace(/[^0-9]/g, '')); }); }); </script>
上記のコードでは、jQueryを使用して非数字を削除する処理を行っています。
input
イベントが発生した際に、val
メソッドとreplace
メソッドを使用して非数字を空文字列に置き換えています。
これらの方法を使用することで、テキストボックスで数字のみを受け付けることができます。また、required
属性を使用することで、必須入力フィールドとして設定することもできます。