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

jQuery

自己在JSFiddle上尝试

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

// Restricts input for the set of matched elements to the given inputFilter function.(function($) {$.fn.inputFilter = function(callback, errMsg) {return this.on("input keydown keyup mousedown mouseup select contextmenu drop focusout", function(e) {if (callback(this.value)) {// Accepted valueif (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){$(this).removeClass("input-error");this.setCustomValidity("");}this.oldValue = this.value;this.oldSelectionStart = this.selectionStart;this.oldSelectionEnd = this.selectionEnd;} else if (this.hasOwnProperty("oldValue")) {// Rejected value - restore the previous one$(this).addClass("input-error");this.setCustomValidity(errMsg);this.reportValidity();this.value = this.oldValue;this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);} else {// Rejected value - nothing to restorethis.value = "";}});};}(jQuery));

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

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

将您喜欢的样式应用于输入错误类。这是一个建议：

.input-error{outline: 1px solid red;}

有关更多输入过滤器示例，请参阅jsfiddle演示。还要注意，您仍然是必须做服务器端验证！

纯JavaScript（没有jQuery）

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

超文本标记语言5

超文本标记语言5具有<input type="number">的本机解决方案（参见产品规格），但请注意浏览器支持各不相同：

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

自己试试在w3schools.com

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

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

您可以使用此JavaScript函数：

function maskInput(e) {//check if we have "e" or "window.event" and use them as "event"//Firefox doesn't have window.eventvar 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()"/>

需要确保您有数字键盘和标签键工作

 // Allow only backspace and deleteif (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 keypressif ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
}else {event.preventDefault();}}

您可以只使用一个简单的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 anythingreturn;}
var charValue = String.fromCharCode(e.keyCode), valid = /^[0-9]+$/.test(charValue);
if (!valid) {e.preventDefault();}

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

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

这是我使用的函数：

// Numeric only control handlerjQuery.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 decimalreturn (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();

使用JavaScript函数isNaN，

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

if（isNaNdocument.getElementById（'inputid'）. val（））

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

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

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

我想帮一点忙，我做了我的版本，onlyNumbers函数…

function onlyNumbers(e){var keynum;var keychar;
if(window.event){  //IEkeynum = e.keyCode;}if(e.which){ //Netscape/Firefox/Operakeynum = 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);}

只需添加输入标签"…输入… id="价格"onkeydown="返回onlyNumbers（事件）"…"，你就完成了；）

jQuery("#no_of").keypress(function(event){//Allow only backspace and deleteif (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);});

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

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

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

$('#AmountText').keydown(function (e) {if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held downe.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}}});

使用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)');

这就是为什么我最近写信来实现这一点。我知道这已经被回答了，但我把这个留给以后使用。

此方法只允许0-9键盘和numpad、退格、制表符、左右箭头（正常形式的操作）

$(".numbersonly-format").keydown(function (event) {// Prevent shift key since its not neededif (event.shiftKey == true) {event.preventDefault();}// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, deleteif ((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 restevent.preventDefault();}});

/**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 ffscanCode = evt.charCode;}else { //For iescanCode = 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);

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

然而，没有从AjaxControlToolkit中借用的一种行为是，当用户复制和粘贴任何非数值时，onchange事件会触发并输入框会吃掉这些值。我检查了代码，发现这个onchange每250ms被调用一次，这是一个性能下降，因此评论了这部分。

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

我建议使用keyup来创建您的过滤器，因为这样您就可以使用$（元素）. 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 onvar $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-datavar 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 methodvar 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// setjQuery.fn.inputmask.defaults = {validators : []};})(jQuery);

要使用它，只需：

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

'一些其他还没有实现验证器'只是在那里展示如何为额外的未来掩码/验证器扩展。你可以添加它或省略它，它不会破坏任何东西；-）

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

希望能有所帮助，干杯

内联：

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

Unobtrusive style (with 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">

我是根据上面@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;}});});

我有一个问题与顶部答案。它不包括数字键盘，如果一个按Shift+数字的特殊标志不应该显示…但这种解决方案不照顾它。

我在这个帖子中找到的最好的链接是：http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values

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

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

通过使用数字（）方法，我们可以开发如下内容：

$('.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}}});});

所以，“#myFormId”表单中的任何文本框，带有“numberOnly”类，只接受包括十进制、浮点数甚至负数的数字。瞧：）

PS：在我的情况下，出于某种原因，我使用jQuery.validator.add方法（）而不是. val的（）：

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

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

您需要允许选项卡：

$("#txtboxToFilter").keydown(function(event) {// Allow only backspace and deleteif ( 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 keypressif ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {event.preventDefault();}}});

我建议也检查event.meta键。如果设置为true，用户可能会执行类似cmd-A的操作来选择字段中的所有文本。您也应该允许这样做。

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

我希望它能在所有浏览器上运行。

对于你正在寻找的东西来说，这可能是矫枉过正，但我建议使用一个名为autoNumery（）的jQuery插件-它很棒！

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

我以这种形式使用。在我看来，允许家、结束、转变和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();}}});

您可以尝试HTML5数量输入：

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

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

我也想回答：）

    $('.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);});

就是这样…只是数字。：）几乎可以只使用“模糊”，但是…

对我来说更简单的是

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

我想这对大家都有帮助

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

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

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

使用jQuery数值。下面的函数允许十进制和数值。
示例：$（"#input Id"）. Numic（{允许: "." });

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

//Input Validationvar 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;}});

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

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

这是一个使用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;}});

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

这似乎牢不可破。

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

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

$("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 selectionif(val.match(notNumber)){ jThis.val(val.replace(notNumber,"")); }}).keyup(); //Trigger on page load to sanitize values set by server

检查输入值是否为数字的简单方法是：

var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){alert('Please enter numeric value');$('#special_price').focus();return;}

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

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

只需要在JQuery中应用此方法，您就可以验证您的文本框只接受数字。

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

试试这个解决方案这里

在document.ready中添加下面的代码

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

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

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

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

<!DOCTYPE html>

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

function isNumberKey(evt){var charCode = (evt.which) ? evt.which : event.keyCodeif (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)))

来源：超文本标记语言文本输入只允许数字输入

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您可以尝试HTML5数字输入：

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

这个输入标签元素现在只接受0到9之间的值因为min属性设置为0，max属性设置为9。

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

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

jQuery('#input_id', function(e){// Allow: backspace, delete, tab, escape, enterif (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 anythingreturn;}// Ensure that it is a number and stop the keypressif ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {e.preventDefault();}});

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

你可以像这样使用输入事件：

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

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

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

以下是正则表达式的方法：

$('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;}

}）；

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

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 containererrorClass: 'help-block', // default input error message classfocusInvalid: true, // do not focus the last invalid inputignore: "",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 submitsuccess.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 grouperror.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();}});}

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

将jQuery代码放在页面中

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

玩得开心：-）

简短而甜蜜-即使这在30多个答案后永远不会得到太多关注；）

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

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

超文本标记语言

<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验证，我最终需要两个功能，一个用于正常用户输入（按键），另一个用于复制+粘贴修复（更改），其他组合会给我带来糟糕的用户体验。

我用更可靠KeyboardEvent.key代替现已弃用KeyboardEvent.char代码

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

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

这里的许多人使用键码属性这可不容易记住。如果您没有语言环境问题，那么您可以简单地使用关键，即实际上是用户键入的输入。

看这个小提琴

$("#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" />

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

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

根据这个问题，它不是必需的，所以你可以简单地删除“.”来删除十进制的条目。

在html代码中尝试它，就像onkeypress和on过去一样

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

这里有很多使用java Script或jQuery的好答案。

我将添加一个非常简单的方法来存档，只使用HTML5。

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

您可以通过添加模式对文本输入使用HTML5验证。无需使用regex或keyCodes手动验证。

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

可能，但对于输入[类型=数字]没有那么简单…

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

来自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上不起作用。对于这些浏览器，我们需要求助于上面的模式解决方案。但是，您仍然可以在这个简单的Poly填充中使用数字输入。

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

在我的例子中，没有一个答案有效，所以我对接受的答案做了一点改变，使其适用于动态添加的元素。

享受：

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

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

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

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

这里有两种不同的方法：

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

您可以使用以下代码。

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

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

<input type="number"

如果是php表单，则添加：

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

这两样

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

如果有一个平滑的OneLiner：

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