将文本字段限制为数字的最佳方法？
我正在使用下面的JavaScript限制我的网站上的文本字段只接受数字input，并没有其他字母或字符。 问题是，它真的拒绝所有其他键input，如CTRL – Aselect文本，甚至任何其他浏览器function，如CTRL – T或CTRL – W，而文本框被选中。 有谁知道一个更好的脚本只允许数字input，但不阻止正常的命令（这是不是直接input到领域）？ 谢谢这里是我现在使用的代码：
function numbersonly(e, decimal) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (decimal && (keychar == ".")) return true; else return false; } 编辑：所提供的解决scheme都没有解决我的问题，允许像ctrl – Aselect文本框时的命令。 这就是我在这里问的全部内容，所以我回到了原来的脚本。 好吧。
这是我为数字创造的另一个时间，它也允许所有的格式化器。
jQuery的
$('input').keypress(function(e) { var a = []; var k = e.which; for (i = 48; i < 58; i++) a.push(i); if (!(a.indexOf(k)>=0)) e.preventDefault(); });
尝试一下
作为一个提示，你也需要在提交/服务器端进行过滤，以便粘贴/上下文菜单和不支持粘贴事件的浏览器。
编辑来详细说明多种方法
我看到你在“接受”的答案中弹跳，所以我会澄清一些事情。 你真的可以使用这里列出的任何方法，它们都可以工作。 我个人所做的是使用我的实时客户端过滤，然后在提交和服务器端使用正如其他人所build议的正则expression式。 然而， 没有客户端本身将是100％有效的，因为没有什么能阻止我把document.getElementById('theInput').value = 'Hey, letters.'; 在控制台和绕过任何客户端validation（轮询除外，但我可以从控制台取消setInterval ）。 使用你喜欢的任何客户端解决scheme，但要确保你在提交和服务器端实现了一些东西。
编辑2 – @Timclosures
好吧，根据评论我必须调整我没有想到的两件事。 首先，按键，而不是keydown，这已被更新，但在IE浏览器（认真微软！？）缺乏indexOf打破了以上的例子。 这是一个替代scheme
$('input').keypress(function(e) { var a = []; var k = e.which; for (i = 48; i < 58; i++) a.push(i); if (!($.inArray(k,a)>=0)) e.preventDefault(); });
新的jsfiddle： http : //jsfiddle.net/umNuB/
.keypress(function(e) { var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8]; if (!($.inArray(e.which, key_codes) >= 0)) { e.preventDefault(); } });
您也需要Backspace和Delete键;）
这适用于IE，Chrome和Firefox：
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
<html> <head> <title>Test</title> <script language="javascript"> function checkInput(ob) { var invalidChars = /[^0-9]/gi if(invalidChars.test(ob.value)) { ob.value = ob.value.replace(invalidChars,""); } } </script> </head> <body> <input type="text" onkeyup="checkInput(this)"/> </body> </html>
只要使用正则expression式来摆脱任何非数字字符，只要按下键或文本框失去焦点。
var numInput; window.onload = function () { numInput = document.getElementById('numonly'); numInput.onkeydown = numInput.onblur = numInput.onkeyup = function() { numInput.value = numInput.value.replace(/[^0-9]+/,""); } }
包含关于input的字符的信息的唯一事件是keypress 。 任何与字符相关的东西都可以从keydown或keyup事件的keyCode属性中推断出来，这是不可靠的，并且依赖于特定的键盘映射。 以下将通过使用从keypress事件获得的字符来防止非数字键盘input所有主stream浏览器。 它不会阻止用户粘贴或拖动非数字文本。
var input = document.getElementById("your_input"); input.onkeypress = function(evt) { evt = evt || window.event; if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) { var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which; if (charCode && !/\d/.test(String.fromCharCode(charCode))) { return false; } } };
也许你正在使用bootstrap。 如果是这样，这可能就足够了：
<input type="text" data-mask="9999999">
input掩码
我使用这个：
oEl.keypress(function(ev) { var sKey = String.fromCharCode(ev.which); if (!sKey.match(/[0-9]/) || !sKey === "") ev.preventDefault(); });
好处是，每一个不提供input的键仍然是允许的，所以你不必担心每一个特殊的键。 即使像CTRL + R组合仍然工作。
编辑由于这不是在Firefox中工作，我不得不稍微修改该function：
oEl.keypress(function(ev) { var iKeyCode = ev.which || ev.keyCode; var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46]; var sKey = String.fromCharCode(iKeyCode); if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) { ev.preventDefault(); } });
说明所有浏览器处理jquerys按键事件的方式不同。 为了使它在FF中工作，$ .inArray检查被添加。 由于firefoxs按键事件不会在使用strg + tab这样的组合时触发，但是其他的做法是，key.match方法仍然为后者增加了一点价值，因为它启用了这些组合。
下面的代码是我广泛使用的东西。 我在一个论坛上find了这个脚本，但是为了适应我的需要而修改和扩展它：
<script type="text/javascript"> // Restrict user input in a text field // create as many regular expressions here as you need: var digitsOnly = /[1234567890]/g; var integerOnly = /[0-9\.]/g; var alphaOnly = /[A-Za-z]/g; var usernameOnly = /[0-9A-Za-z\._-]/g; function restrictInput(myfield, e, restrictionType, checkdot){ if (!e) var e = window.event if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; var character = String.fromCharCode(code); // if user pressed esc... remove focus from field... if (code==27) { this.blur(); return false; } // ignore if the user presses other keys // strange because code: 39 is the down key AND ' key... // and DEL also equals . if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) { if (character.match(restrictionType)) { if(checkdot == "checkdot"){ return !isNaN(myfield.value.toString() + character); } else { return true; } } else { return false; } } } </script>
不同的使用方法是：
<!-- To accept only alphabets --> <input type="text" onkeypress="return restrictInput(this, event, alphaOnly);"> <!-- To accept only numbers without dot --> <input type="text" onkeypress="return restrictInput(this, event, digitsOnly);"> <!-- To accept only numbers and dot --> <input type="text" onkeypress="return restrictInput(this, event, integerOnly);"> <!-- To accept only numbers and only one dot --> <input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');"> <!-- To accept only characters for a username field --> <input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
添加<script type="text/javascript" src="jquery.numeric.js"></script>然后使用
$("element").numeric({ decimal: false, negative: false });
更简单的方式和容易理解：
$('#someID').keypress(function(e) { var k = e.which; if (k <= 48 || k >= 58) {e.preventDefault()}; });
这是罗伯特答案的变化，允许input一个小数点。 如果已经input小数点，则只有数字被接受为input。
JSFiddle – 十进制数字input
// Allow only decimal number input $('#decimalInput').keypress(function (e) { var a = []; var k = e.which; for (i = 48; i < 58; i++) a.push(i); // allow a max of 1 decimal point to be entered if (this.value.indexOf(".") === -1) { a.push(46); } if (!(a.indexOf(k) >= 0)) e.preventDefault(); $('span').text('KeyCode: ' + k); });
值得指出的是，无论你通过前端（Javascript，HTML等）如何控制这个，你仍然需要在服务器上validation它，因为没有什么能够阻止用户closuresjavascript，甚至故意张贴垃圾到你的表格，试图破解你。
我的build议：使用HTML5标记，以便支持它的浏览器将使用它。 同样使用之前提到的JQuery选项（初始解决scheme可能有缺陷，但似乎评论一直在努力）。 然后做服务器端validation。
这也将使数字键盘input。
.keydown(function(event){ if(event.keyCode == 8 || event.keyCode == 46) return true; if(event.keyCode >= 96 && event.keyCode <= 105) return true; if(isNaN(parseInt(String.fromCharCode(event.keyCode),10))) return false; });
为了阻止任何数字被input到文本字段，但仍然允许其他button的工作（如删除，移位，标签等）看一个JavaScript的关键代码的参考 ; 65以上（至222）的任何信息都可以被阻止。
使用jquery和Javascript，看起来像这样：
$('#textFieldId').keydown(function(event) { if ( event.keyCode > 64 ) { event.preventDefault(); } });
不pipe是否使用Jquery，关键代码在Javascript中都是一样的。
我的function：
$('.input_integer_only').on('input', function(e) { $(this).val($(this).val().replace(/[^0-9]/g, '')); }); $('.input_float_only').on('input', function(e) { var $var = $(this).val().replace(/[^0-9\.]/g, ''); var $aVar = $var.split('.'); if($aVar.length > 2) { $var = $aVar[0] + '.' + $aVar[1]; } $(this).val($var); });
这是我的解决scheme：下面的工作组合。
var checkInput = function(e) { if (!e) { e = window.event; } var code = e.keyCode || e.which; if (!e.ctrlKey) { //46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46) return true; //35..39 - home, end, left, right if (code >= 35 && code <= 39) return true; //numpad numbers if (code >= 96 && code <= 105) return true; //keyboard numbers if (isNaN(parseInt(String.fromCharCode(code), 10))) { e.preventDefault(); return false; } } return true; };
我试图自己弄清楚这个问题的时候遇到了你的问题。 这是我提出的解决scheme。
// Prevent user from entering non-numeric characters in number boxes. (function (inputs) { var input; var f = function (e) { var unicodeRe = /U\+(\d+)/; // Chrome doesn't support the standard key property, so use keyIdentifier instead. // Instead of the actual character that "key" returns, keyIdentifier returns // A string such as "U+004F" representing the unicode character. // For special characters (eg, "Shift", a string containing the name of the key is returned.) var ch = e.key || e.keyIdentifier; var match = ch.match(unicodeRe); // keyIdentifier returns a unicode. Convert to string. if (match) { ch = String.fromCharCode(Number.parseInt(match[1], 16)); } console.log(ch); if (ch.length === 1 && /[^0-9]/.test(ch)) { if (!/[\b]/.test(ch)) { // Don't prevent backspace. e.preventDefault(); } } }; for (var i = 0, l = inputs.length; i < l; i += 1) { input = inputs[i]; input.onkeydown = f; } }(document.querySelectorAll("input[type=number],#routeFilterBox")));
编辑：我发现我的解决scheme不允许用户在Chrome中通过数字键盘input数字。 0-9小键盘按键似乎是返回字符“`”为0和AI为其余的数字键。
这是我的插件：
(function( $ ) { $.fn.numbers = function(options) { $(this).keypress(function(evt){ var setting = $.extend( { 'digits' : 8 }, options); if($(this).val().length > (setting.digits - 1) && evt.which != 8){ evt.preventDefault(); } else{ if(evt.which < 48 || evt.which > 57){ if(evt.keyCode != 8){ evt.preventDefault(); } } } }); }; })( jQuery );
使用：
$('#limin').numbers({digits:3}); $('#limax').numbers();
有我目前的数字input的解决scheme，需要在不同的浏览器testing，但似乎工作
支持逗号和句点分隔符（捷克本地是逗号），空格和数字键盘/键盘的数字input。 允许Ctrl + C Ctrl + A或Ctrl + X，箭头导航并删除块Ctrl + V。 通过模糊input来回应退出键。
观看我的咖啡脚本：
(($) -> $.fn.onlyNumbers = -> @each -> $(@).keydown (e) -> # get code of key code = if e.keyCode then e.keyCode else e.which return $(@).blur() if code is 27 # blur on escape return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x] return if code in [96..105] # numpad numbers return if code in [48..57] # numbers on keyboard return if code in [35..39] # 35..39 - home, end, left, right return if code in [188, 190, 32] # comma, period, space return if code in [44] # comma, period, e.returnValue = false # IE hate you e.preventDefault(); $(@).keypress (e) -> code = if e.keyCode then e.keyCode else e.which return if code in [44, 46, 32] # comma, period, space return if code in [48..57] # numbers on keyboard e.returnValue = false # IE hate you e.preventDefault(); ) jQuery
你可以在这里获得编译的Javascript http://goo.gl/SbyhXN
您可以进行更改以接受Ctrl键的键码：17,18,19,20。然后，您的代码将如下所示：
function numbersonly(e, decimal) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (decimal && (keychar == ".")) return true; else return false; }
您可以通过引入keypresshandler函数来处理html上的事件
function keypresshandler(event) { var charCode = event.keyCode; //You condition if (charCode == 58 ){ event.preventDefault(); return false; } }
document.getElementById('myinput').onkeydown = function(e) { if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8 || e.keyCode == 9)) { return false; } }
你可以这样做只接受文本框中的数字，
function onChange(event){ var ckeckChars = /[^0-9]/gi; if(checkChars.test(event.target.value)) { event.target.value = event.target.value.replace(ckeckChars,""); }
我知道， 已经有很多答案，但为了简单起见，我想添加另一个简单而自我解释的答案，其中我们不必记住键码 ，它也适用于所有浏览器 。
document.getElementById('myinput').onkeydown = function(e) { console.log(e.key); //console.log(e.target.value); 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 (e.target.value.indexOf(".") == -1) { return true; } else { return false; } break; default: return false; } }
<input type="text" placeholder="Enter Value" id="myinput" />
