JavaScript:keydown事件中的输入验证 [英] JavaScript: input validation in the keydown event
问题描述
我正在尝试在 keydown
事件过程中对用户文本输入进行信息验证。我试图在 keydown
事件中进行验证的原因是因为我不想在中显示那些被认为是非法的字符在开头输入
框。
I'm attempting to do info validation against user text input in the process of keydown
event. The reason that I am trying to validate in the keydown
event is because I do not want to display the characters those that are considered to be illegal in the input
box at the beginning.
我写的验证是这样的,
function validateUserInput(){
var code = this.event.keyCode;
if ((code<48||code>57) // numerical
&&code!==46 //delete
&&code!==8 //back space
&&code!==37 // <- arrow
&&code!==39) // -> arrow
{
this.event.preventDefault();
}
}
我可以继续这样,但是我看到了这个实现的缺点。例如:
I can keep going like this, however I am seeing drawbacks on this implementation. Those are, for example:
- 当我提出更多条件进行检查时,条件语句变得越来越长。
-
keyCodes
可能因浏览器而异。 - 我不仅要检查什么是不合法的,还要检查什么是例外情况。在上面的示例中, delete , backspace 和 arrow 键是例外。
- Conditional statement become longer and longer when I put more conditions to be examined.
keyCodes
can be different by browsers.- I have to not only check what is not legal but also have to check what are exceptional. In above examples, delete, backspace, and arrow keys are exceptional.
但我不想丢失的功能是不要在 textarea
中显示输入,除非它通过验证。 (如果用户试图将非法字符放在 textarea
中,则根本不会出现任何内容)这就是为什么我没有在 keyup上进行验证
event。
But the feature that I don't want to lose is having not to display the input in the textarea
unless it passes the validation. (In case the user try to put illegal characters in the textarea
, nothing should appear at all) That is why I am not doing validation upon keyup
event.
所以我的问题是:
- 是否有更好的方法来验证
keydown
事件中的输入,而不是通过keyCode $检查
keyCode
c $ c>? - 在浏览器显示之前,还有其他方法可以捕获除
keydown
事件之外的用户输入吗?还有一种方法可以对其进行验证吗?
- Are there better ways to validate input in
keydown
event than checkingkeyCode
bykeyCode
? - Are there other ways to capture the user inputs other than
keydown
event before browser displays it? And a way to put the validation on it?
感谢您提前获得帮助。
推荐答案
如果您正在检查可打印的密钥,这正是您正在做的事情,您应该使用 keypress
事件,因为这是你唯一能够获得关于按键所代表的角色的可靠信息的地方。您无法在 keydown
事件中可靠地检测数字按键。此外,禁止箭头键和删除/退格键是一个坏主意。你从中获得了什么?
If you're checking a printable key, which is exactly what you seem to be doing, you should use the keypress
event instead, since that's the only place you're going to be able to get reliable information about the character the keypress represents. You can't detect numeric keypresses reliably in the keydown
event. Also, it's a bad idea to suppress arrow keys and delete/backspace keys. What do you gain from doing that?
还有一些错误:在Firefox中,你需要得到事件
传递给事件处理函数的参数中的对象,如果你使用的是DOM0事件处理函数而不是 addEventListener()
或 attachEvent ()
,你应该使用 return false;
来抑制默认行为。这是我推荐的代码:
There's also some errors: in Firefox, you'll need to get the Event
object from the parameter passed into the event handler function, and if you're using a DOM0 event handler function rather than addEventListener()
or attachEvent()
, you should use return false;
to suppress default behaviour. Here's my recommended code:
var input = document.getElementById("your_input_id");
input.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (/\d/.test(charStr)) {
return false;
}
};
这篇关于JavaScript:keydown事件中的输入验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!