如何只允许使用jQuery的HTMLinput框中的数字（0-9）？

我正在创build一个网页，我有一个input文本字段，我只希望只允许数字字符（0,1,2,3,4,5 … 9）0-9。

我怎样才能做到这一点使用jQuery？

看看这个插件（texotela的数字jquery插件叉） 。 这（jStepper）是另一个。

这是一个链接，如果你想自己build立它。 

$(document).ready(function() { $("#txtboxToFilter").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A, Command+A (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right, down, up (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(); } }); });

注意：如果您的网页使用HTML5，则可以使用内置的<input type="number">并使用min和max属性来控制最小值和最大值。

以下是最小化，也允许使用CTRL + x ， CTRL + c和CTRL + v 

 $(function() { $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()}); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="staticParent"> <input id="child" type="textarea" /> </div>

这是我使用的function： 

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

一致： 

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

您可以使用简单的JavaScript正则expression式来testing纯数字字符： 

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

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

你可以使用这样的input事件： 

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

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

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

使用JavaScript函数isNaN ， 

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

if（isNaN（document.getElementById（'inputid'）。val（））） 

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

更新：这里有一篇不错的文章，但是使用jQuery：将HTML文本框中的input限制为数字值

简短而又甜蜜 – 即使这样做在30个以上的答案之后永远不会得到太多的关注;） 

  $('#number_only').bind('keyup paste', function(){ this.value = this.value.replace(/[^0-9]/g, ''); }); 
 $(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

我在我们的内部常用js文件中使用这个。 我只是将该类添加到需要此行为的任何input。 

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

更简单的一个是我 

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

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

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

很酷的是它在移动设备上显示一个数字键盘，比使用jQuery更好。

你可以使用这个非常简单的解决scheme来做同样的事情 

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

您可以尝试HTML5 号码input： 

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

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

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

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

注意：模式属性适用于以下inputtypes：文本，search，url，电话，电子邮件和密码。

  • 可以用任何正则expression式来replace[0-9]。

  • {1,3}代表最小值1，最多可input3位数字。

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

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

我来到了一个非常好的简单的解决scheme，不妨碍用户select文本或复制粘贴，如其他解决scheme。 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

你可以使用这个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，所以你可以用inline JavaScript将它绑定到你的文本框中： 

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

我认为这将有助于每个人 

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

这是我前一段时间创build的一个快速解决scheme。 你可以在我的文章中阅读更多关于它的内容：

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

我想帮助一点，我做了我的版本， onlyNumbersfunction… 

 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标签中添加“… input … id =”price“onkeydown =”return onlyNumbers（event）“…”，你就完成了）

我写了基于@ user261922上面的post，略有修改，所以你可以select全部，标签，并可以在同一页面上处理多个“仅数字”字段。 

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

我也想回答:) 

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

这就是数字。 :)几乎它可以只与'模糊'，但…

你会想要允许选项卡： 

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

这似乎是牢不可破的。 

 // 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值是数字是： 

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

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

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

试试这个解决scheme

您可以尝试HTML5号码input： 

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

当min属性被设置为0并且max属性被设置为9时，该input标签元素现在将仅在0到9之间取值。

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

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

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

如何在Java中检查string是否为数字

PHP：最好的方法来检查input是否是一个有效的数字？

如何从数字中读取值作为单词？

我如何格式化一个string数字以逗号和整数？

通过javascript / jquery删除/截断前导零

格式浮点数n个小数位

有没有一种简单的方法将数字转换为PHP中的单词？

Python – 查找数字列表中最大的数字

如何限制一个Django模型中的数字字段的最大值？

如何从MySQL查询中的string提取数值？