如何只允许使用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">并使用minmax属性来控制最小值和最大值。


以下是最小化,也允许使用CTRL + xCTRL + cCTRL + 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(); } }