テキストボックスで数字のみを受け付ける方法


  1. HTMLのinput要素を使用する方法:

    <input type="text" pattern="[0-9]*" title="数字のみ入力してください" required>

    上記のコードでは、pattern属性を使用して正規表現パターン[0-9]*を指定し、数字のみを受け付けるようにしています。

  2. 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メソッドを使用して非数字を空文字列に置き換えています。

  3. 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属性を使用することで、必須入力フィールドとして設定することもできます。