按键事件中的输入验证 [英] 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.

我正在编写的验证是这样的，

The validation I am writing is like this,

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:

1. 当我放置更多要检查的条件时，条件语句变得越来越长。


2. keyCodes 可能因浏览器而异。


3. 我不仅要检查哪些不合法，还必须检查哪些例外。在上面的示例中， delete ， backspace 和 arrow 键是例外的。

1. Conditional statement become longer and longer when I put more conditions to be examined.
2. keyCodes can be different by browsers.
3. 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 事件。

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.

所以我的问题是：

1. 与通过 keyCode keyCode 相比，是否有更好的方法来验证 keydown 事件中的输入c $ c>？


2. 在浏览器显示事件之前，还有其他方法可以捕获 keydown 事件以外的用户输入吗？还有一种验证方法？

1. Are there better ways to validate input in keydown event than checking keyCode by keyCode?
2. 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中，您需要获取 Event 来自传递给事件处理函数的参数的对象，如果您使用的是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;
    }
};

这篇关于按键事件中的输入验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！