javascript 忽略按键上的输入字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15302746/
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
Ignoring input characters on key down
提问by dano
I want to ignore certain characters in my phone input, so that the database just has digits. I know I can do this easy on server side (using PHP) but I am trying to understand js events a little better.. My question is this:
我想忽略手机输入中的某些字符，以便数据库只有数字。我知道我可以在服务器端轻松做到这一点（使用 PHP），但我试图更好地理解 js 事件..我的问题是：
If I have a basic input:
如果我有一个基本输入：
var phoneInput = document.getElementById("phoneInput");
I can add an event listener using "onkeydown" which works fine
我可以使用“onkeydown”添加一个事件监听器，它工作正常
phoneInput.onkeydown = function(e){
var c = String.fromCharCode(e.keyCode);
var patt = /\d/;
if(!patt.test(c)) return false;
};
But if I try doing the same thing using 'addEventListener', returning false seems to do nothing
但是如果我尝试使用“addEventListener”做同样的事情，返回 false 似乎什么都不做
phoneInput.addEventListener("keydown",function(e){
var c = String.fromCharCode(e.keyCode);
var patt = /\d/;
if(!patt.test(c)) return false;
});
I just don't understand why. Thanks in advance for any light you can shine on the subject..
我只是不明白为什么。预先感谢您可以照亮该主题的任何光线。
回答by Niet the Dark Absol
I would strongly advise against changing the user's input or otherwise prevent them from typing something while they're doing it. It is confusing and leads to a bad user experience.
我强烈建议不要更改用户的输入或以其他方式阻止他们在输入时输入内容。它令人困惑并导致糟糕的用户体验。
Ideally, you should keep your server-side validation and then use HTML5 features such as these:
理想情况下，您应该保留服务器端验证，然后使用 HTML5 功能，例如：
<input type="number" /> Allows only numbers
<input type="text" pattern="[0-9. -]*" /> Allows numbers, spaces, periods and hyphens
<input type="text" required /> Specifies a required field
Modern browsers will prevent the form from being submitted and present helpful error message to the user (which you can customise with a titleattribute).
现代浏览器将阻止提交表单并向用户显示有用的错误消息（您可以使用title属性自定义）。
However, for general reference, return false;doesn't necessarily cancel the event. To do that, you should use this:
但是，作为一般参考，return false;不一定取消活动。要做到这一点，你应该使用这个：
// if you haven't already:
e = e || window.event;
// to cancel the event:
if( e.preventDefault) e.preventDefault();
return false;
回答by Neil Girardi
I had to do something similar for a project I'm working on. This is how I did it.
我必须为我正在从事的项目做类似的事情。我就是这样做的。
// prevent users from typing alpha/ symbol characters on select fields
$("#modal-region").on("keydown", "#markdown, #sku", function(e) {
var key = e.which;
// when a keydown event occurs on the 0-9 keys the value
// of the "which" property is between 48 - 57
// therefore anything with a value greater than 57 is NOT a numeric key
if ( key > 57) {
e.preventDefault();
} else if (key < 48) {
// we don't want to disable left arrow (37), right arrow (39), delete (8) or tab (9)
// otherwise the use cannot correct their entry or tab into the next field!
if (key != 8 && key != 9 && key != 37 && key != 39 ) {
e.preventDefault();
}
}
});
