JavaScript:keydown事件中的输入验证

Question

我正在尝试在keydown事件过程中对用户文本输入进行信息验证.我试图在keydown事件中验证的原因是因为我不想input在开头的框中显示那些被认为是非法的字符.

我写的验证是这样的,

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();        
    }
}

我可以像这样继续前进,但是我看到这个实现的缺点.这些是,例如:

1. 当我提出更多条件进行审查时,条件陈述变得越来越长.
2. keyCodes 可以是不同的浏览器.
3. 我不仅要检查什么是不合法的,还要检查什么是例外情况.在上述例子中,delete,backspace,和arrow密钥是个例外.

但是我不想丢失的功能是textarea除非通过验证,否则不要在输入中显示输入.(如果用户试图将非法字符放入其中textarea,则根本不应出现任何内容)这就是为什么我没有对keyup事件进行验证.

所以我的问题是:

1. 是否有更好的方法来验证输入keydown事件不是检查keyCode的keyCode？
2. keydown在浏览器显示之前,还有其他方法可以捕获除事件之外的用户输入吗？还有一种方法可以对其进行验证吗？

我在这里先向您的帮助表示感谢.

Answer 1

如果您正在检查可打印的密钥,这正是您正在做的事情,那么您应该使用该keypress事件,因为这是您唯一可以获得有关按键所代表的字符的可靠信息的地方.您无法在keydown事件中可靠地检测数字按键.此外,禁止箭头键和删除/退格键是一个坏主意.这样做你会得到什么？

还有一些错误:在Firefox中,你需要Event从传递给事件处理函数的参数中获取对象,如果你使用的是DOM0事件处理函数而不是addEventListener()或者attachEvent(),你应该使用它return false;来抑制默认行为.这是我推荐的代码:

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;
    }
};