如何强制输入字段仅使用 JavaScript 输入数字？

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

以下示例将解释如何强制输入字段力数。

• 通过使用 ASCII 码
• 通过使用 replace()、isNan()函数

示例 1：下面的示例说明Input[type=”text”]在 ASCII 代码的帮助下仅允许使用 Javascript 的数字值。

HTML

  

    
    
    
        div {
            width: 400px;
            height: 130px;
            border: 2px solid black;
            padding: 15px;
            position: absolute;
            left: 27%;
        }
    

  

    
        
          GeeksforGeeks
        
        
          Force input field to take only numbers as an input
        
    
  
    
        
            Register No:
            
  
            
            
            Ph. Number:
            
  
            
            
            
                Age:
                
                
            
        
    


    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;
    }


    function detailssubmit() {
        alert("Your details were Submitted");
    }

  

输出：

示例 2：下面的示例说明 Input[type="text"] 在 jQuery 的 replace() 方法和 javascript 的isNaN()函数的帮助下，仅允许使用 Javascript 的数字值。

HTML

  

    
    
    
    

  

    
        
         GeeksforGeeks
        
            Input[type=text] allow only
            Numeric Value Example
        
        
  
        
            Enter 4-digit Pin:
            
            
            
  
            Enter passkey:
            
        
  
    


    $(function() {
        $("input[name='numonly']").on('input', function(e) {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
    });


    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
            }
        }
    }

  

输出：

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。