如何使用 jQuery 在 HTML 输入框中只允许数字（0-9）？

Question

我正在创建一个网页，其中有一个输入文本字段，我想在其中只允许数字字符，例如 (0,1,2,3,4,5...9) 0-9。

如何使用 jQuery 做到这一点？

Answer 1

^{注意：这是一个更新的答案。 下面的评论指的是一个旧版本，它弄乱了键码。}

jQuery

在 JSFiddle 上自己尝试一下。

没有针对此的原生 jQuery 实现，但是您可以使用以下inputFilter插件过滤文本<input>的输入值（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局以及自 IE 9 以来的所有浏览器）：

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

您现在可以使用inputFilter插件来安装输入过滤器：

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

有关更多输入过滤器示例，请参阅JSFiddle 演示。 另请注意，您仍然必须进行服务器端验证！

纯 JavaScript（没有 jQuery）

实际上并不需要 jQuery，你也可以用纯 JavaScript 做同样的事情。 看到这个答案。

HTML 5

HTML 5 有一个带有<input type="number">的本机解决方案（请参阅规范），但请注意浏览器支持各不相同：

• 大多数浏览器只会在提交表单时验证输入，而不会在输入时验证。
• 大多数移动浏览器不支持step 、 min和max属性。
• Chrome（版本 71.0.3578.98）仍然允许用户在字段中输入字符e和E 另请参阅此问题。
• Firefox（版本 64.0）和 Edge（EdgeHTML 版本 17.17134）仍然允许用户在字段中输入任何文本。

在 w3schools.com 上亲自尝试一下。

Answer 2

这是我使用的功能：

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

然后，您可以通过执行以下操作将其附加到您的控件：

$("#yourTextBoxName").ForceNumericOnly();

Answer 3

排队：

 <input name="number" onkeyup="if (/\\D/g.test(this.value)) this.value = this.value.replace(/\\D/g,'')">

不显眼的风格（使用 jQuery）：

 $('input[name="number"]').keyup(function(e) { if (/\\D/g.test(this.value)) { // Filter non-digits from input value. this.value = this.value.replace(/\\D/g, ''); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="number">

Answer 4

您可以使用简单的 JavaScript 正则表达式来测试纯数字字符：

/^[0-9]+$/.test(input);

如果输入是数字，则返回 true，否则返回 false。

或者对于事件键码，简单使用如下：

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

Answer 5

您可以像这样在输入事件上使用：

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

但是，这个代码特权是什么？

• 它适用于移动浏览器（keydown 和 keyCode 有问题）。
• 它也适用于 AJAX 生成的内容，因为我们使用的是“on”。
• 比 keydown 更好的性能，例如在粘贴事件上。

Answer 6

简短而甜蜜 - 即使这在 30 多个答案之后永远不会引起太多关注；)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

Answer 7

使用 JavaScript 函数isNaN ，

if (isNaN($('#inputid').val()))

如果 (isNaN(document.getElementById('inputid').val()))

if (isNaN(document.getElementById('inputid').value))

更新：这里有一篇很好的文章谈论它，但使用 jQuery：将HTML 文本框中的输入限制为数值

Answer 8

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

来源： http : //snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Answer 9

我在我们内部通用的 js 文件中使用了它。 我只是将该类添加到需要此行为的任何输入中。

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

Answer 10

对我来说更简单的是

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

Answer 11

为什么这么复杂？ 你甚至不需要 jQuery，因为有一个 HTML5 模式属性：

<input type="text" pattern="[0-9]*">

很酷的事情是它在移动设备上提供了一个数字键盘，这比使用 jQuery 好得多。

Answer 12

您可以使用这个非常简单的解决方案来做同样的事情

 $("input.numbers").keypress(function(event) { return /\\d/.test(String.fromCharCode(event.keyCode)); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="numbers" name="field_name" />

我参考了此链接以获取解决方案。 它完美地工作！！！

Answer 13

HTML5 中的 pattern 属性指定一个正则表达式，元素的值被检查。

  <input  type="text" pattern="[0-9]{1,3}" value="" />

注意：pattern 属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。

• [0-9] 可以用任何正则表达式条件替换。

• {1,3} 表示可以输入最小 1 和最大 3 位数字。

Answer 14

你可以试试 HTML5数字输入：

<input type="number" value="0" min="0"> 

对于不兼容的浏览器，有Modernizr和Webforms2回退。

Answer 15

使用jQuery.validate相当简单

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

Answer 16

我找到了一个非常好的简单的解决方案，它不会像其他解决方案那样阻止用户选择文本或复制粘贴。 jQuery 风格:)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

Answer 17

function suppressNonNumericInput(event){
        if( !(event.keyCode == 8                                // backspace
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
            ) {
                event.preventDefault();     // Prevent character input
        }
    }

Answer 18

你可以使用这个 JavaScript 函数：

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

你可以像这样将它绑定到你的文本框：

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

我在生产中使用了上述内容，它运行良好，并且是跨浏览器的。 此外，它不依赖于 jQuery，因此您可以使用内联 JavaScript 将其绑定到您的文本框：

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Answer 19

我认为它会帮助每个人

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

Answer 20

这是我前段时间创建的快速解决方案。 你可以在我的文章中阅读更多关于它的信息：

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

Answer 21

在 html 代码中尝试它自己就像 onkeypress 和 onpast

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false">

Answer 22

这是一个使用 jQuery UI Widget 工厂的答案。 您可以轻松自定义允许使用的字符。

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

这将允许数字、数字符号和美元金额。

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

Answer 23

这似乎牢不可破。

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

Answer 24

这是两种不同的方法：

1. 允许带小数点的数值
2. 允许没有小数点的数值

方法 1：

 $("#approach1").on("keypress keyup blur",function (e) { $(this).val($(this).val().replace(/[^0-9\\.]/g,'')); if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) { event.preventDefault(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Numeric with decimal point</h2><br/> <span>Enter Amount</span> <input type="text" name="amount" id="approach1">

方法 2：

 $("#approach2").on("keypress keyup blur",function (event) { $(this).val($(this).val().replace(/[^\\d].+/, "")); if ((event.which < 48 || event.which > 57)) { event.preventDefault(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Numeric without decimal point</h2><br/> <span>Enter Amount</span> <input type="text" name="amount" id="approach2">

Answer 25

我根据上面@user261922 的帖子编写了我的帖子，稍作修改，以便您可以全选、选项卡并可以在同一页面上处理多个“仅数字”字段。

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

Answer 26

您希望允许选项卡：

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Answer 27

需要确保数字小键盘和 Tab 键也能正常工作

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Answer 28

我正在创建一个网页，其中有一个输入文本字段，我只想在其中允许数字字符，例如（0,1,2,3,4,5 ... 9）0-9。

我如何使用jQuery做到这一点？

Answer 29

只需在Jquery中应用此方法，就可以验证文本框以仅接受数字。

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

在这里尝试此解决方案

Answer 30

您可以尝试输入HTML5数字：

<input type="number" placeholder="enter the number" min="0" max="9">

由于最小属性设置为0，最大属性设置为9，因此此输入标签元素现在将仅在0到9之间取值。

有关更多信息，请访问http://www.w3schools.com/html/html_form_input_types.asp

Answer 31

我想提供一点帮助，我制作了我的版本， onlyNumbers函数......

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

只需添加输入标签 "...input ... id="price" onkeydown="return onlyNumbers(event)"..." 就完成了;)

Answer 32

这就是我最近写信来实现这一目标的原因。 我知道这已经得到了回答，但我将其留作以后使用。

此方法只允许0-9键盘和小键盘，退格键，制表符，左右箭头（正常表单操作）

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});

Answer 33

我也想回答：）

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

就是这样……只是数字。 :) 几乎它可以只与“模糊”一起工作，但是......

Answer 34

您可以通过添加模式对文本输入使用 HTML5 验证。 无需使用正则表达式或密钥代码手动验证。

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

---

可能，但输入 [type=number] 没那么简单...

[type="number"] 的问题是我们不能只删除末尾的无效字符。 只要输入无效，用户代理就会返回一个空字符串。

来自 W3C HTML5 规范：

如果元素的值不是有效的浮点数，则将其设置为空字符串。

https://dev.w3.org/html5/spec-LC/number-state.html#number-state

这意味着我们需要一种方法来手动存储先前的输入值。

因此，对于数字输入，解决方案如下所示：

$("input[type=number], input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = $(this).data("current-valid") || "";
    else
        $(this).data("current-valid", this.value);
});

---

不幸的是，这不适用于 IE 和 EDGE。 对于这些浏览器，我们需要采用上面的模式解决方案。 但是，您仍然可以通过这个简单的 polyfill 使用数字输入。

$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");

Answer 35

使用击键检测按下的字符存在令人难以置信的兼容性问题……请参阅quirksmode以了解更多信息。

我建议使用 keyup 来创建过滤器，因为这样您就可以使用 $(element).val() 方法来评估实际的通用字符。

然后您可以使用正则表达式过滤掉任何非数字，例如：

替换(/[^0-9]/g,'');

这可以解决所有问题，如移位和粘贴问题，因为总是有一个 keyup，因此将始终评估该值（除非关闭 javascript）。

所以......把它变成JQuery......这是我正在编写的一个未完成的小插件，它被称为输入掩码，完成后将支持更多掩码。 现在它有数字掩码工作。

来了...

/**
 * @author Tom Van Schoor
 * @company Tutuka Software
 */
(function($) {
  /**
   * @param {Object}
   * $$options options to override settings
   */
  jQuery.fn.inputmask = function($$options) {
    var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);

    return this.each(function() {
      // $this is an instance of the element you call the plug-in on
      var $this = $(this);

      /*
       * This plug-in does not depend on the metadata plug-in, but if this
       * plug-in detects the existence of the metadata plug-in it will
       * override options with the metadata provided by that plug-in. Look at
       * the metadata plug-in for more information.
       */
      // o will contain your defaults, overruled by $$options,
      // overruled by the meta-data
      var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;

      /*
       * if digits is in the array 'validators' provided by the options,
       * stack this event handler
       */
      if($.inArray('digits', o.validators) != -1) {
        $this.keyup(function(e) {
          $this.val(stripAlphaChars($this.val()));
        });
      }

      /*
       * There is no such things as public methods in jQuery plug-ins since
       * there is no console to perform commands from a client side point of
       * view. Typically only private methods will be fired by registered
       * events as on-click, on-drag, etc... Those registered events could be
       * seen as public methods.
       */

      // private method
      var stripAlphaChars = function(string) {
        var str = new String(string); 
        str = str.replace(/[^0-9]/g, ''); 
        return str;
      }

    });
  };

  // static public functions
  //jQuery.fn.inputmask.doSomething = function(attr) {

  //};

  // static public members
  //jQuery.fn.inputmask.someStaticPublicMember;

  // some default settings that can be overridden by either $$options or
  // metadata
  // If you need callback functions for the plug-in, this is where they get
  // set
  jQuery.fn.inputmask.defaults = {
    validators : []
  };
})(jQuery);

要使用它，只需执行以下操作：

$('#someElementId').inputmask({
  validators: ['digits','someOtherNotYetImplementedValidator']
});

'someOtherNotYetImplementedValidator' 只是为了展示如何为更多的未来掩码/验证器扩展它。 您可以添加或删除它，它不会破坏任何内容；-)

对于额外杂乱的评论，我正在使用我为这里工作的人创建的模板。

希望这有帮助，干杯

Answer 36

您可以使用以下代码。

 <input type="text" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57">

Answer 37

为了详细说明答案 #3，我将执行以下操作（注意：仍然不支持通过键盘或鼠标粘贴操作）：

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );

Answer 38

如果您必须解决变音符号和特殊字符，请尝试使用：

$(this).on( 'keypress', function( e )
{
    // Ensure that it is a number and stop the keypress
    if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
        e.preventDefault();
    }
});  

Answer 39

这是正则表达式的方法：

$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}

});

https://jsfiddle.net/astrapi69/qbk2vjty/1/

如果您想限制其他字符而不是数字，您可以将正则表达式更改为其他任何内容。

Answer 40

更新的解决方案以获得更好的用户体验，解决了复制+粘贴问题并替换了已弃用的 keyCode 属性：

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9']
  return keys.indexOf(event.key) > -1
})

细节：

首先，输入类型：

number显示缩小实际输入空间的向上/向下箭头，我发现它们很丑，只有当数字代表一个数量时才有用（电话、区号、ID...不需要它们） tel提供类似的浏览器验证没有箭头的数字

使用 [number / tel] 还有助于在移动设备上显示数字键盘。

对于 JS 验证，我最终需要 2 个函数，一个用于普通用户输入（按键），另一个用于复制+粘贴修复（更改），其他组合会给我带来糟糕的用户体验。

我使用更可靠的KeyboardEvent.key而不是现在已弃用的KeyboardEvent.charCode

根据您的浏览器支持，您可以考虑使用Array.prototype.includes()而不是命名不佳的Array.prototype.indexOf() （对于真/假结果）

Answer 41

此 jQuery 代码过滤掉在按住 Shift 、 Ctrl或Alt 时键入的字符。

$('#AmountText').keydown(function (e) {
    if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
        e.preventDefault();         // Prevent character input
    } else {
        var n = e.keyCode;
        if (!((n == 8)              // backspace
        || (n == 46)                // delete
        || (n >= 35 && n <= 40)     // arrow keys/home/end
        || (n >= 48 && n <= 57)     // numbers on keyboard
        || (n >= 96 && n <= 105))   // number on keypad
        ) {
            e.preventDefault();     // Prevent character input
        }
    }
});

Answer 42

我对最佳答案有疑问。 它不包括数字小键盘，如果按下 shift+number，则也不应显示特殊符号。但此解决方案不会解决此问题。

我在此线程中找到的最佳链接是： http : //www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values

我是 stackoverflow 的新手，所以我不知道是否可以将更好的解决方案编辑到顶帖中。

Answer 43

在 document.ready 中添加以下代码

    $('.class of text box').keyup(function () 
    {
    this.value = this.value.replace(/[^0-9]/g, '');
    });  

Answer 44

您可以使用HTML5 输入类型 number来限制仅数字条目：

<input type="number" name="someid" />

这仅适用于 HTML5 投诉浏览器。 确保您的 html 文档的 doctype 是：

<!DOCTYPE html>

对于一般用途，您可以进行 JS 验证，如下所示：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

如果你想允许小数用这个替换“if 条件”：

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

来源： HTML 文本输入仅允许数字输入

JSFiddle 演示： http : //jsfiddle.net/Gagan_Gami/nSjy7/333/

Answer 45

这里的很多人都在使用不容易记住的keycode属性。 如果您没有区域设置问题，那么您可以简单地使用key ，它实际上是用户键入的输入。

看到这个小提琴

 $("#txt").on("keypress",function(e){ console.log("Entered Key is " + e.key); switch (e.key) { case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": case "0": case "Backspace": return true; break; case ".": if ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box. { return true; } else { return false; } break; default: return false; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Enter Value <input id="txt" type="text" />

问题然后看下面的简单代码。

请注意，此示例还包含对十进制输入的验证。

根据这个问题，它不是必需的，因此您可以简单地删除案例“。” 删除十进制的条目。

Answer 46

对于您正在寻找的内容来说，这可能有点过头了，但我建议使用一个名为 autoNumeric() 的 jQuery 插件——它很棒！

您可以限制为仅数字、小数精度、最大值/最小值等。

http://www.decorplanit.com/plugin/

Answer 47

试试这个

$('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

Answer 48

/**
Makes the textbox to accept only numeric input
*/

(function($) {
    $.fn.allowOnlyNumeric = function() {

        /**
        The interval code is commented as every 250 ms onchange of the textbox gets fired.
        */

        //  var createDelegate = function(context, method) {
        //      return function() { method.apply(context, arguments); };
        //  };

        /**
        Checks whether the key is only numeric.
        */
        var isValid = function(key) {
            var validChars = "0123456789";
            var validChar = validChars.indexOf(key) != -1;
            return validChar;
        };

        /**
        Fires the key down event to prevent the control and alt keys
        */
        var keydown = function(evt) {
            if (evt.ctrlKey || evt.altKey) {
                evt.preventDefault();
            }
        };

        /**
        Fires the key press of the text box   
        */
        var keypress = function(evt) {
            var scanCode;
            //scanCode = evt.which;
            if (evt.charCode) { //For ff
                scanCode = evt.charCode;
            }
            else { //For ie
                scanCode = evt.keyCode;
            }

            if (scanCode && scanCode >= 0x20 /* space */) {
                var c = String.fromCharCode(scanCode);
                if (!isValid(c)) {
                    evt.preventDefault();
                }
            }
        };

        /**
        Fires the lost focus event of the textbox   
        */
        var onchange = function() {
            var result = [];
            var enteredText = $(this).val();
            for (var i = 0; i < enteredText.length; i++) {
                var ch = enteredText.substring(i, i + 1);
                if (isValid(ch)) {
                    result.push(ch);
                }
            }
            var resultString = result.join('');
            if (enteredText != resultString) {
                $(this).val(resultString);
            }

        };

        //var _filterInterval = 250;
        //var _intervalID = null;

        //var _intervalHandler = null;

        /**
        Dispose of the textbox to unbind the events.
        */
        this.dispose = function() {
            $(this).die('change', onchange);
            $(this).die('keypress', keypress);
            $(this).die('keydown', keydown);
            //window.clearInterval(_intervalHandler);
        };

        $(this).live('change', onchange);
        $(this).live('keypress', keypress);
        $(this).live('keydown', keydown);
        //_intervalHandler = createDelegate(this, onchange);
        //_intervalID = window.setInterval(_intervalHandler, _filterInterval);
    }
})(jQuery);

上面的$ 插件是从AjaxControlToolkit 过滤器文本框extender.js 编写的。

然而，AjaxControlToolkit 没有借鉴的一种行为是，当用户复制和粘贴任何非数字值时，onchange 事件会触发并且文本框会吃掉这些值。 我查看了代码，发现每 250 毫秒后调用一次 onchange，这是性能损失，因此对该部分进行了评论。

Answer 49

没有一个答案在我的情况下有效，因此我对接受的答案进行了一些更改，使其适用于动态添加的元素。

享受 ：

var inputFilter = function (elem, cb) {
    /*
    *    /^-?\d*$/               restricts input to integer numbers
    *    /^\d*$/                 restricts input to unsigned integer numbers
    *    /^[0-9a-f]*$/i          restricts input to hexadecimal numbers
    *    /^-?\d*[.,]?\d*$/       restricts input to floating point numbers (allowing both . and , as decimal separator)
    *    /^-?\d*[.,]?\d{0,2}$/   restricts input to currency values (i.e. at most two decimal places)
    */
    bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
        if (cb(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty('oldValue')) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        }
    });
};

用法 ：

inputFilter('#onlyDigitsInput', function (val) {
    return /^\d*$/.test(val);
});

Answer 50

最简单的解决方案是在您的 html 表单代码中添加：

<input type="number"

如果它是一个 php 表单，则添加：

$data = array(
        'type' => 'number',

这两个

1. 阻止用户输入逗号
2. 阻止用户粘贴逗号（它粘贴数字但去掉逗号）

Answer 51

这个答案是完美的，但我们甚至可以通过将它与jQuery.Validation 插件结合来使它更好、更强大。

通过使用number() 方法，我们可以开发如下内容：

$('.numberOnly').keydown(function (event) { 
  if ((!event.shiftKey && !event.ctrlKey && !event.altKey) && 
    ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) 
  // 0-9 or numpad 0-9, disallow shift, ctrl, and alt 
  { 
    // check textbox value now and tab over if necessary 
  } 
  else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37 
    && event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109 
    && event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190) 
  // not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190) 
  { 
    event.preventDefault(); 
  } 
  // else the key should be handled normally 
}); 
// _____________________________________________
jQuery.validator.setDefaults({ 
  debug: true, 
  success: "valid" 
}); 
// _____________________________________________
$(document).ready(function(){ 
  $('#myFormId').validate({ 
    rules: { 
      field: { 
        required: true, 
        number: true 
      } 
    } 
  }); 
}); 

因此，具有“numberOnly”类的“#myFormId”表单中的任何文本框仅接受数字，包括小数、浮点数甚至负数。 瞧:)

PS：就我而言，出于某种原因，我使用了 jQuery.validator.addMethod() 而不是 .validate()：

jQuery.validator.addMethod("numberOnly", function (value, element) { 
var result = !isNaN(value); 
return this.optional(element) || result; 
}, jQuery.format("Please enter a valid number.")); 

（它在我的 ASP.NET MVC 3 项目+不显眼的 JavaScript 验证中运行良好，hooooooooray！）

Answer 52

另一种方法如下。 这也将处理粘贴。 [用于字母数字验证]

//Input Validation
var existingLogDescription = "";

$('.logDescription').keydown(function (event) {
    existingLogDescription = this.value;

});


$('.logDescription').keyup(function () {
    if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
        alert("Log Description should contain alpha-numeric values only");
        this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
        this.value = existingLogDescription;
    }
});

Answer 53

检查小数点是否已使用：-

        // Stop: Multiple decimal points
        if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
            e.preventDefault(); 

Answer 54

$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}

Answer 55

重构已接受的答案，以便不再需要使用评论，因为我讨厌评论。 这也更容易用茉莉花测试。

    allowBackspaceDeleteTabEscapeEnterPress: function(event){
    return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
    return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
    return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
    return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
            || this.allowContorlAPress(event)
            || this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
    return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
    return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
   return (event.shiftKey
           || (this.isNotFromTopRowNumberKeys(event)
                && this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
    $('.myinputclassselector').keydown(function (event) {
        if(this.validateKeyPressEvent(event)) return false;
    });
},
validateKeyPressEvent: function(event){
    if(this.theKeyPressedIsEditRelated(event)){
        return;
    } else {
        if (this.theKeyIsNonNumeric(event)) {
            event.preventDefault();
        }
    }
}

Answer 56

使用下面的简单 jQuery 只允许在 tetbox 中使用数字字符。 您不需要手动过滤所有特殊字符，因此不会有遗漏某些特殊字符的危险。 这将只允许数字 0-9 :（将代码放在准备好的文档中，并根据您的数字文本字段类名更改类名。）

//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
    // Get the non Numeric char that was enetered
    var nonNumericChars = $(this).val().replace(/[0-9]/g, '');                                  
    // Now set the value in text box 
    $(this).val( $(this).val().replace(nonNumericChars, ''));    

});

Answer 57

我将所有答案合二为一，并得出了以下代码：

jQuery('#input_id', function(e){
    // Allow: backspace, delete, tab, escape, enter
    if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Disallow several dots (allow 190 only if no dots found)
        (e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
        // Bug in some Android devices where it is always 229
        (e.keyCode === 229) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

此外，表单应该有autocomplete="off" 。 如果没有此选项，您可能会遇到移动设备上自动完成算法的问题。

Answer 58

function validate_profile(frmid) {
    var form = $('#' + frmid);
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: true, // do not focus the last invalid input
        ignore: "",
        rules: {
            contact_no: {
                required: true,
                minlength: 10,
                maxlength: 10,
                number: true
            }, email_id: {
                required: true,
                email: true
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit   
            success.hide();
            error.show();
            Metronic.scrollTo(error, -7000);
        },
        highlight: function (element) { // hightlight error inputs
            $(element)
                    .closest('.form-group').addClass('has-error'); // un set error class to the control group
            $(element)
                    .closest('.form-group').removeClass('has-success'); // set success class to the control group
        },
        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                    .closest('.form-group').removeClass('has-error'); // un set error class to the control group
            $(element)
                    .closest('.form-group').addClass('has-success'); // set success class to the control group
            error.hide();
        },
        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.closest('.form-group').addClass('has-success');
        },
        submitHandler: function (form) {
            success.show();
            error.hide();
            form.submit();
        }
    });
}

Answer 59

在输入文本中放置一个类并将其命名为 only_numbers

将jquery代码放在页面中

$(document).ready(function() {
    $('.only_numbers').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

玩得开心 ：-）

Answer 60

这是我用来验证整数或浮点值的数字输入的内容（jQuery 不显眼的风格）：

 $('input[name="number"]').keyup(function(e) { var float = parseFloat($(this).attr('data-float')); /* 2 regexp for validating integer and float inputs ***** > integer_regexp : allow numbers, but do not allow leading zeros > float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part *************************************************************************/ var integer_regexp = (/[^0-9]|^0+(?!$)/g); var float_regexp = (/[^0-9\\.]|^\\.+(?!$)|^0+(?=[0-9]+)|\\.(?=\\.|.+\\.)/g); var regexp = (float % 1 === 0) ? integer_regexp : float_regexp; if (regexp.test(this.value)) { this.value = this.value.replace(regexp, ''); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" data-float="1" id="number" name="number" placeholder="integer"> <input type="text" data-float="0.1" id="number" name="number" placeholder="float">

Answer 61

在这里用 java Script 或 jQuery 做这件事有很多很好的答案。

我将添加一种非常简单的方法来仅使用 HTML5 将其存档。

<input type="number" name="quantity" min="0" max="9">

Answer 62

jQuery("#no_of").keypress(function(event){
    //Allow only backspace and delete
    if (event.keyCode != 46 && event.keyCode != 8) {
        if (!parseInt(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }
});

jQuery("#no_of").keyup(function(e){
    var temp_s= jQuery("#no_of").val();
    var multiply_val= temp_s*10;
    jQuery("#ex-r").html(multiply_val);
});

Answer 63

$(document).on("keypress", ".classname", function(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
});

Answer 64

如果添加了非数字字符，这将保持先前的值。

$(document).on('input', '.digit-input', function() {
    var prevVal = $(this).attr('ov') ? $(this).attr('ov') : '';
    var newVal = this.value.replace(/[^0-9]/g, '');
    this.value = newVal != '' ? newVal : prevVal;
    $(this).attr('ov', this.value);
});

 $(document).on('input', '.digit-input', function() { var prevVal = $(this).attr('ov') ? $(this).attr('ov') : ''; var newVal = this.value.replace(/[^0-9]/g, ''); this.value = newVal != '' ? newVal : prevVal; $(this).attr('ov', this.value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="digit-input">

Answer 65

如果有一个平滑的 OneLiner：

<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

Answer 66

我建议也检查 event.metaKey。 如果设置为 true，则用户可能正在执行类似 cmd-A 的操作来选择字段中的所有文本。 你也应该允许。

Answer 67

我正在以这种形式使用。 对我来说似乎正确允许像home 、 end 、 shift和ctrl这样的键，但用户的缺点是可以打印特殊字符：

$("#busca_cep").keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
        if (event.keyCode == 13) {
            localiza_cep(this.value);
        }
    } else {
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Answer 68

使用 jquery 数值。 下面的函数允许使用十进制和数值。
示例： $("#inputId").numeric({ allow: "." });

Answer 69

function Numbers(e)
{
    if($.browser.msie)
    {
        if(e.keyCode > 47 && e.keyCode < 58)
            return true;
        else
            return false;
    }
    else
    {
        if((e.charCode > 47 && e.charCode < 58) || (e.charCode == 0))
            return true;
        else
            return false;
    }
}

我希望这适用于所有浏览器。