JavaScript 如何强制输入框只接受数字

默认情况下， input 字段具有属性 type=”number” ，用于以数值格式获取输入。现在使用JavaScript或jQuery强制 input 字段 type=”text” 仅接受数字值。您还可以在输入字段中设置 type=”tel” 属性，这将在移动设备上弹出数字键盘。有很多其他方法可以强制输入字段仅接受数字输入。

以下示例将说明如何强制输入字段只接受数字。

使用ASCII码
使用 replace() 和 isNan() 函数

示例1： 下面的示例说明了如何使用JavaScript的ASCII码使 Input[type=”text”] 只允许数字值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <style>
        div {
            width: 400px;
            height: 130px;
            border: 2px solid black;
            padding: 15px;
            position: absolute;
            left: 27%;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;padding:13px;">
          GeeksforGeeks
        </h1>
        <h3>
          Force input field to take only numbers as an input
        </h3>
    </center>
 
    <div class="container">
        <form name="inputnumber"
              autocomplete="off">
            <b>Register No:</b>
            <input type="text"
                   onkeypress="return onlyNumberKey(event)"
                   maxlength="11"
                   size="50%" />
 
            <br>
            <br>
            <b>Ph. Number:</b>
            <input type="tel"
                   size="50%"
                   onkeypress="return onlyNumberKey(event)" />
 
            <br>
            <br>
            <center>
                <b>Age:</b>
                <input type="number"
                       placeholder=" Only 12+ allowed"
                       min="12" />
                <input type="submit"
                       value="Submit"
                       onclick="return detailssubmit()">
            </center>
        </form>
    </div>
    <script>
        function onlyNumberKey(evt) {
             
            // Only ASCII character in that range allowed
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }
    </script>
    <script>
        function detailssubmit() {
            alert("Your details were Submitted");
        }
    </script>
</body>
</html>

输出：

JavaScript 如何强制输入框只接受数字

示例2： 下面的示例说明了如何使用Javascript和jQuery的replace()方法，以及Javascript的isNaN()函数，只允许输入[type=”text”]中的数字值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green;padding:13px;">
         GeeksforGeeks</h1>
        <h3>
            Input[type=text] allow only
            Numeric Value Example
        </h3>
        <br>
 
        <form autocomplete="off" id="form1">
            <b>Enter 4-digit Pin:</b>
            <input type="text" name="numonly"
                   maxlength="4">
            <br>
            <br>
 
            <b>Enter passkey:</b>
            <input type="text" name="passkey"
                   id="num"
                   oninput="return onlynum()"
                   minlength="2">
        </form>
 
    </center>
    <script>
         $(function() {$ ("input[name='numonly']").on('input', function(e) {
                 $(this).val($ (this).val().replace(/[^0-9]/g, ''));
            });
        });
    </script>
    <script>
        function onlynum() {
            var fm = document.getElementById("form2");
            var ip = document.getElementById("num");
            var tag = document.getElementById("value");
            var res = ip.value;
     
            if (res != '') {
                if (isNaN(res)) {
                     
                    // Set input value empty
                    ip.value = "";
                     
                    // Reset the form
                    fm.reset();
                    return false;
                } else {
                    return true
                }
            }
        }
    </script>
</body>
</html>

输出：

JavaScript 如何强制输入框只接受数字