如何在 JavaScript 的表单验证中禁用键盘输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6535248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable keyboard input in form validation for JavaScript
提问by ranvir singh
I want to validate a text box so that it only takes numeric values. If the user tries to press alphabet keys, the keystrokes must be ignored, i.e nothing can be typed in.
我想验证一个文本框，以便它只接受数值。如果用户尝试按字母键，则必须忽略按键，即不能输入任何内容。
How can this be done?
如何才能做到这一点？
回答by Iman Hejazi
Use this code in your HTML page:
在您的 HTML 页面中使用此代码：
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
回答by Vadim Belyaev
You might need to use the onkeypressevent.
您可能需要使用该onkeypress事件。
An example which does the opposite thing (input field accepts everything but numbers) can be found here: http://www.w3schools.com/jsref/event_onkeypress.asp
可以在此处找到执行相反操作的示例（输入字段接受除数字以外的所有内容）：http: //www.w3schools.com/jsref/event_onkeypress.asp
回答by Rob
how about somthing similar to this
类似的东西怎么样
//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (IsNumeric(charCode)) { //key's keycode
return false;
}
});
回答by Wolfgang Kuehn
W3C recommends using the oninputevent, which is future proof and takes care of devices which do not have a keyboard. If your targeted browsers support oninput, do not use any keyboard events.
W3C 建议使用该oninput事件，它是面向未来的并且可以处理没有键盘的设备。如果您的目标浏览器支持oninput，请不要使用任何键盘事件。
回答by Tim Down
With HTML5 in modern browsers you can use <input type="number">(see Dive Into HTML5for some examples). You'll need a fallback for older browsers though, so here you go. This works in all major browsers. It won't prevent the user from pasting or dragging in non-numeric content, however.
您可以在现代浏览器中使用HTML5（有关示例，<input type="number">请参阅Dive Into HTML5）。不过，您需要对旧浏览器进行回退，所以就这样吧。这适用于所有主要浏览器。但是，它不会阻止用户粘贴或拖动非数字内容。
jsFiddle: http://jsfiddle.net/JCUT2/
jsFiddle：http: //jsfiddle.net/JCUT2/
var textBox = document.getElementById("foo");
textBox.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (/\D/.test(String.fromCharCode(charCode))) {
return false;
}
};
回答by Spirit6666
You can make a javascript function that you will call everytime you press a key in your textbox (with the onkeypress event).
您可以创建一个 javascript 函数，每次按下文本框中的键时都会调用该函数（使用 onkeypress 事件）。
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
回答by Josh
I recently was dealing with the same situation (but opposite -- I wanted onlyalphabetic characters). I initially considered simply using the keypressevent, but that has a few fatal flaws:
我最近正在处理同样的情况（但相反——我只想要字母字符）。我最初考虑简单地使用该keypress事件，但这有一些致命的缺陷：
- The user can still paste invalid data into the field;
- The user can drag invalid text into the field;
- Cancelling the keypress invalidates certain valid input (e.g., hotkeys) unless you take special care regarding meta keys (which I'm not positive is possible to do in a robust, complete, and portable manner);
- Autocomplete;
- And so on for any number of non-keyboard input methods.
- 用户仍然可以将无效数据粘贴到字段中；
- 用户可以将无效文本拖入该字段；
- 取消按键会使某些有效输入（例如，热键）无效，除非您特别注意元键（我不确定这是否可以以稳健、完整和可移植的方式进行）；
- 自动完成；
- 对于任意数量的非键盘输入法，依此类推。
Fortunately, at least Firefox and IE9 have a solution: they have an inputevent that fires for any manner of input method, whether it's a keystroke or a paste operation or whatever. IE<9 doesn't have that, but they do have a pasteevent to handle the most common use-case, but take care that it fires beforethe paste actually occurs, so you have to cancel the paste and then do most of the (IE-specific) paste work manually (just a couple of lines of code, but still a bit annoying).
幸运的是，至少 Firefox 和 IE9 有一个解决方案：它们有一个input事件可以触发任何输入法，无论是击键还是粘贴操作或其他任何方式。IE<9 没有，但它们确实有一个paste事件来处理最常见的用例，但要注意它在粘贴实际发生之前触发，因此您必须取消粘贴，然后执行大部分 ( IE 特定）手动粘贴工作（只需几行代码，但仍然有点烦人）。
I was developing for an internal network that didn't support other browsers, so I haven't researched what WebKit has available. The DOM Level 3 spec has a textinputevent, but at least Firefox does not support it yet.
我正在为不支持其他浏览器的内部网络开发，所以我还没有研究 WebKit 有什么可用。DOM Level 3 规范有一个textinputevent，但至少 Firefox 还不支持它。
