HTML文本input只允许数字input

有没有一种快速的方法来设置一个HTML文本input( <input type=text /> ),只允许数字键击(加'。')?

JavaScript (最可靠)

 <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'> </input> 

虽然这很简单,但不会让您使用组合键和其他不可键入的键。 对于还支持types号和最大长度validationinput的更完整的JavaScript解决scheme,请考虑使用此Polyfill 。

带有<!DOCTYPE html> HTML 5具有原生解决scheme :

<input type="number">

请注意,它在某些浏览器中的行为不符合标准 。

尝试使用inputtypes=数字来查看HTML5版本。

另请参阅https://github.com/jonstipe/number-polyfill ,以获得旧版浏览器的透明支持。

jQuery的

 $(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/cmd+A (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: Ctrl/cmd+C (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: Ctrl/cmd+X (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // 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(); } }); }); 

更复杂的validation选项

如果你想做一些其他validation点和片断,这可能是方便的:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

但是不要忘记你还必须做服务器端validation!

对于AZERTY键盘:

jQuery的

 // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: Ctrl+C (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: Ctrl+X (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39) || //Allow numbers and numbers + shift key ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) { // 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(); } 

使用这个DOM

 <input type='text' onkeypress='validate(event)' /> 

而这个脚本

 function validate(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } } 

我已经search了很长时间,很难得到一个很好的答案,我们迫切需要<input type="number" ,但是总之,这两个是我能想到的最简洁的方法:

 <input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"> 

如果您不喜欢在被删除之前显示一秒钟的未接受字符,下面的方法是我的解决scheme。 注意许多附加条件,这是为了避免禁用各种导航和热键。 如果任何人知道如何compactify这个,让我们知道!

 <input type="text" onkeydown="return ( event.ctrlKey || event.altKey || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) || (95<event.keyCode && event.keyCode<106) || (event.keyCode==8) || (event.keyCode==9) || (event.keyCode>34 && event.keyCode<40) || (event.keyCode==46) )"> 

HTML5有<input type=number> ,这听起来适合你。 目前,只有Opera本身支持它,但是有一个项目具有JavaScript实现。

还有一个例子对我很有用:

 function validateNumber(event) { var key = window.event ? event.keyCode : event.which; if (event.keyCode === 8 || event.keyCode === 46) { return true; } else if ( key < 48 || key > 57 ) { return false; } else { return true; } }; 

还附加到按键事件

 $(document).ready(function(){ $('[id^=edit]').keypress(validateNumber); }); 

和HTML:

 <input type="input" id="edit1" value="0" size="5" maxlength="5" /> 

这是一个jsFiddle的例子

我select使用这里提到的两个答案的组合,即

<input type="number" />

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

<input type="text" onkeypress="return isNumberKey(event);">

这里的大多数答案都有使用关键事件的弱点

许多答案会限制你使用键盘macros,复制+粘贴和更多不想要的行为进行文本select的能力,其他人似乎依赖于特定的jQuery插件,这是用机枪杀死苍蝇。

无论input机制如何(按键,复制+粘贴,右键单击复制粘贴,语音到文本等),这个简单的解决scheme对我来说都是跨平台的最佳select。 所有的文本select键盘macros都可以正常工作,甚至可以限制用脚本设置非数字值的能力。

 function forceNumeric(){ var $input = $(this); $input.val($input.val().replace(/[^\d]+/g,'')); } $('body').on('propertychange input', 'input[type="number"]', forceNumeric); 

HTML5支持正则expression式,所以你可以使用这个:

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

警告:有些浏览器还不支持。

这是一个简单的,只允许一个小数,但不能更多:

 <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /> 

2解决scheme:

使用表单validation器(例如使用jQueryvalidation插件 )

使用正则expression式在input字段的onblur事件(即当用户离开字段时)进行检查:

 <script type="text/javascript"> function testField(field) { var regExpr = new RegExp("^\d*\.?\d*$"); if (!regExpr.test(field.value)) { // Case of error field.value = ""; } } </script> <input type="text" ... onblur="testField(this);"/> 

JavaScript的

 function validateNumber(evt) { var e = evt || window.event; var key = e.keyCode || e.which; if (!e.shiftKey && !e.altKey && !e.ctrlKey && // numbers key >= 48 && key <= 57 || // Numeric keypad key >= 96 && key <= 105 || // Backspace and Tab and Enter key == 8 || key == 9 || key == 13 || // Home and End key == 35 || key == 36 || // left and right arrows key == 37 || key == 39 || // Del and Ins key == 46 || key == 45) { // input is VALID } else { // input is INVALID e.returnValue = false; if (e.preventDefault) e.preventDefault(); } } 

另外你可以添加逗号,句点和减号(,.-)

  // comma, period and minus, . on keypad key == 190 || key == 188 || key == 109 || key == 110 || 

HTML

 <input type="text" onkeydown="validateNumber(event);"/ > 

很简单….

//在JavaScript函数中(可以使用HTML或PHP)。

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

在你的表单input中:

 <input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'> 

最大input (上面这些允许一个12位数字)

你可以使用这个模式:

 <input id="numbers" pattern="[0-9.]+" type="number"> 

在这里您可以看到完整的移动网站界面提示 。

使用jQuery和replace(),而不是查看event.keyCode或event.which的一个简短而甜蜜的实现:

 $('input.numeric').live('keyup', function(e) { $(this).val($(this).val().replace(/[^0-9]/g, '')); }); 

只是键入的字母瞬间出现的小副作用和CTRL / CMD + A似乎有点奇怪。

如果你想build议在设备(可能是手机)之间的字母或数字你可以使用<input type="number">

一个更安全的方法是检查input的值,而不是劫持按键,并尝试过滤keyCodes。

这样用户可以自由使用键盘箭头,修改键,退格键,删除,使用非标准键盘,使用鼠标粘贴,使用拖放文本,甚至使用辅助functioninput。

下面的脚本允许正数和负数

 1 10 100.0 100.01 -1 -1.0 -10.00 1.0.0 //not allowed 
 var input = document.getElementById('number'); input.onkeyup = input.onchange = enforceFloat; //enforce that only a float can be inputed function enforceFloat() { var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/; var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/; if (!valid.test(this.value)) { var n = this.value.match(number); this.value = n ? n[0] : ''; } } 
 <input id="number" value="-3.1415" placeholder="Type a number" autofocus> 

只是使用jQuery的其他变体

 $(".numeric").keypress(function() { return (/\d/.test(String.fromCharCode(event.which) )) }); 
 <input name="amount" type="text" value="Only number in here"/> <script> $('input[name=amount]').keyup(function(){ $(this).val($(this).val().replace(/[^\d]/,'')); }); </script> 

input type="number"是一个HTML5属性。

在另一种情况下,这将帮助您:

 function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : evt.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } <input type="number" name="somecode" onkeypress="return isNumberKey(event)"/> 

请找下面提到的解决scheme。 在这个用户只能inputnumeric值,用户也不能copypastedraginput。

允许的字符

 0,1,2,3,4,5,6,7,8,9 

不允许通过事件的字符和字符

  • 字母值
  • 特殊字符
  • 复制
  • 拖动
  • 下降
 $(document).ready(function() { $('#number').bind("cut copy paste drag drop", function(e) { e.preventDefault(); }); }); function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only"> 

您也可以将input值(默认情况下视为string)与自身强制为数字进行比较,如下所示:

 if(event.target.value == event.target.value * 1) { // returns true if input value is numeric string } 

但是,你需要将它绑定到像键盘等事件

这是geowa4解决scheme的扩展版本。 支持minmax属性。 如果数字超出范围,则会显示之前的值。

你可以在这里testing它。

用法: <input type=text class='number' maxlength=3 min=1 max=500>

 function number(e) { var theEvent = e || window.event; var key = theEvent.keyCode || theEvent.which; if(key!=13&&key!=9){//allow enter and tab key = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key)) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } } } $(document).ready(function(){ $("input[type=text]").filter(".number,.NUMBER").on({ "focus":function(e){ $(e.target).data('oldValue',$(e.target).val()); }, "keypress":function(e){ e.target.oldvalue = e.target.value; number(e); }, "change":function(e){ var t = e.target; var min = $(t).attr("min"); var max = $(t).attr("max"); var val = parseInt($(t).val(),10); if( val<min || max<val) { alert("Error!"); $(t).val($(t).data('oldValue')); } } }); }); 

如果input是dynamic的使用这个:

 $(document).ready(function(){ $("body").on("focus","input[type=text].number,.NUMBER",function(e){ $(e.target).data('oldValue',$(e.target).val()); }); $("body").on("keypress","input[type=text].number,.NUMBER",function(e){ e.target.oldvalue = e.target.value; number(e); }); $("body").on("change","input[type=text].number,.NUMBER",function(e){ var t = e.target var min = $(t).attr("min"); var max = $(t).attr("max"); var val = parseInt($(t).val()); if( val<min || max<val) { alert("Error!"); $(t).val($(t).data('oldValue')); } }); }); 

JavaScript代码:

 function validate(evt) { if(evt.keyCode!=8) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode(key); var regex = /[0-9]|\./; if (!regex.test(key)) { theEvent.returnValue = false; if (theEvent.preventDefault) theEvent.preventDefault(); } } } 

HTML代码:

 <input type='text' name='price' value='0' onkeypress='validate(event)'/> 

因为backspace的键码是8,而正则expression式不允许,所以这是一个简单的方法来绕过错误:)

您可以用以下代码replaceShurokfunction:

 $(".numeric").keypress(function() { return (/[0123456789,.]/.test(String.fromCharCode(Event.which) )) }); 

最好的方法(允许所有types的数字 – 真实负数,真正正数,整数负数,整数正数)是:

 $(input).keypress(function (evt){ var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :) var objRegex = /^-?\d*[\.]?\d*$/; var val = $(evt.target).val(); if(!regex.test(key) || !objRegex.test(val+key) || !theEvent.keyCode == 46 || !theEvent.keyCode == 8) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); }; }); 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Allow Only Numbers </HEAD> <BODY> <script language="JavaScript"> function onlyNumbers(evt) { var e = event || evt; // for trans-browser compatibility var charCode = e.which || e.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } </script> <input type="text" onkeypress="return onlyNumbers();"> </BODY> </HTML> 

代码波纹pipe也将检查PASTE事件。
取消“ ruleSetArr_4 ”的注释并添加(concate)到“ ruleSetArr ”以允许FLOAT编号。
轻松复制/粘贴function。 用参数中的input元素调用它。
例如: inputIntTypeOnly($('input[name="inputName"]'))

 function inputIntTypeOnly(elm){ elm.on("keydown",function(event){ var e = event || window.event, key = e.keyCode || e.which, ruleSetArr_1 = [8,9,46], // backspace,tab,delete ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys ruleSetArr_4 = [17,67,86], // Ctrl & V //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier var retRes = ruleSetArr.indexOf(key); } else { var retRes = $.inArray(key,ruleSetArr); }; if(retRes == -1){ // if returned key not found in array, return false return false; } else if(key == 67 || key == 86){ // account for paste events event.stopPropagation(); }; }).on('paste',function(event){ var $thisObj = $(this), origVal = $thisObj.val(), // orig value newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value if(newVal.replace(/\D+/g, '') == ""){ // if paste value is not a number, insert orig value and ret false $thisObj.val(origVal); return false; } else { $thisObj.val(newVal.replace(/\D+/g, '')); return false; }; }); }; var inptElm = $('input[name="inputName"]'); inputIntTypeOnly(inptElm); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="inputName" value="1"> 

给input字段一个类( <input class="digit" ...> )并使用jquery如下。

 jQuery(document).ready(function () { jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); }); }); 

上面的代码也可以禁用Ctrl+V笔画中的特殊字符,也可以right click笔画。

我的解决scheme提供更好的用户体验:

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

细节:

首先, inputtypes

number显示向上/向下箭头缩小实际的input空间,我觉得他们丑陋,只有在数字代表数量(如电话,地区代码,ID等事情…不需要它们)时才有用tel提供类似的浏览器validation没有箭头的号码

使用[号码/电话]也有助于在移动设备上显示数字键盘。

对于JSvalidation,我最终需要2个函数,一个用于普通用户input(按键),另一个用于复制+粘贴修改(更改),其他组合会给我一个可怕的用户体验。

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

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

使用这个DOM:

 <input type = "text" onkeydown = "validate(event)"/> 

而这个脚本:

 validate = function(evt) { if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1) { evt.returnValue = false; if(evt.preventDefault){evt.preventDefault();} } } 

…或者这个脚本,没有indexOf,使用两个…

 validate = function(evt) { var CharValidate = new Array("08", "046", "039", "948", "235"); var number_pressed = false; for (i = 0; i < 5; i++) { for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++) { if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount) { number_pressed = true; } } } if (number_pressed == false) { evt.returnValue = false; if(evt.preventDefault){evt.preventDefault();} } } 

我使用onkeydown属性而不是onkeypress,因为onkeydown属性在onkeypress属性之前被检查。 问题将出现在Google Chrome浏览器中。

使用属性“onkeypress”,TAB将无法控制与谷歌浏览器“preventDefault”,但是,与属性“onkeydown”,TAB变得可控!

TAB的ASCII代码=> 9

第一个脚本比第二个脚本的代码less,但是,ASCII字符数组必须包含所有的键。

第二个脚本比第一个脚本大得多,但是数组并不需要所有的键。 数组中每个位置的第一个数字是每个位置将被读取的次数。 对于每个阅读,将增加1到下一个。 例如:

NCount = 0

48 + NCount = 48

NCount ++

48 + NCount = 49

NCount ++

48 + NCount = 57

在数字键只有10(0 – 9)的情况下,但是如果它们是100万,则用所有这些键创build一个数组是没有意义的。

ASCII码:

  • 8 ==>(Backspace);
  • 46 =>(删除);
  • 37 =>(左箭头);
  • 39 =>(右箭头);
  • 48 – 57 =>(数字);
  • 36 =>(家);
  • 35 =>(结束);