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值，用户也不能copy ， paste ， draginput。
允许的字符
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的扩展版本。 支持min和max属性。 如果数字超出范围，则会显示之前的值。
你可以在这里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 =>（结束）;
