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 键是异常(exception)。

但我不想失去的功能是，除非通过验证，否则不必在 textarea 中显示输入。 (如果用户试图在 textarea 中输入非法字符，则什么也不会出现)这就是为什么我没有对 keyup 事件进行验证。

所以我的问题是:

1. 是否有比通过 keyCode 检查 keyCode 更好的方法来验证 keydown 事件中的输入？
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;
    }
};