$(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

你会想要允许tab:

$("#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(); 
        }   
    }
});

有一个难以置信的兼容性问题，使用按键来检测被按下的字符…参见quirksmode了解更多信息。

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

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

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

这就解决了所有的问题，比如移动和粘贴问题，因为总是有一个键up，所以值总是会被求值(除非javascript被关闭)。

所以…把它变成JQuery…这是我正在写的一个未完成的插件，它叫做inputmask，完成后将支持更多的掩码。现在它有数字掩码工作。

开始了……

/**
 * @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'只是在那里展示如何扩展它以用于额外的未来掩码/验证器。你可以添加或删除它，它不会破坏任何东西;-)

为这些额外杂乱的评论道歉，我使用的是我为这里的工作人员创建的模板。

希望这能有所帮助， 干杯

HTML5中的pattern属性指定了检查元素值的正则表达式。

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

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

[0-9]可以替换为任意正则表达式条件。 {1,3}表示可以输入1的最小值和3的最大值。

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

这是我用来验证整数或浮点值的数字输入(不显眼的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">