只有数字的JavaScript Firefox解决方案

Question

我需要一些帮助来清理一段导致Firefox出现问题的流行JavaScript代码。

下面的which/keyCode检查似乎是最流行的香草JS解决方案，只允许数字进入input或textarea。

var charCode = (e.which) ? e.which : e.keyCode;
if (charCode > 31 && ( charCode < 48 || charCode > 57)) {
 return false;
}
return true;

通过标签上的onkeypress="return function(event);"调用。

然而，Firefox显然将箭头键绑定到onkeypress调用，而不是像其他浏览器一样仅绑定到onkeyup和onkeydown。这意味着例如，左箭头键的charCode是37，但% (shift+5)的charCode也是如此。更重要的是，这意味着方向键不能用于导航(将插入符号/文本光标向左或向右移动)。

然而，不同之处在于左箭头键有keyCode 37，而%有37的charCode和which(如http://www.asquare.net/javascript/tests/KeyCode.html所示)。因此，我可以通过以下操作使箭头键正常工作:

if (charcode > 31 && (charcode < 48 || charcode > 57)) {
 if (e.keycode && e.keyCode > 36 && e.keyCode < 41) {
  return true;
 }
  return false;
}
return true;

然而，我觉得这不是最好或最干净的方式，Firefox可能会处理更多不同的键，而不仅仅是方向键。有什么更干净的JS解决方案或方法来检查这个函数中的箭头键?

多谢!

---

编辑:我只是认为，即使代码解决了Firefox，它引入了一个新的问题，所有其他浏览器，在这些现在允许charCodes 37-40(即%)的输入。似乎不是检查keyCode，它需要检查charCode或which，否则以相同的方式。

Answer 1

我建议不要阻塞某些键，因为我觉得这会降低用户体验。但考虑到这是你需要的，我建议不要依赖keyCode属性。它不仅存在与之相关的兼容性问题，而且还不能涵盖所有的输入方式，比如鼠标和上下文菜单，因此不推荐使用:

此功能已从Web标准中删除。

KeyboardEvent.keyCode read-only属性表示与系统和实现相关的数字代码

我建议使用input事件，它在每次更改输入值时触发，然后清除非数字的值，同时将光标放在第一个违规字符所在的位置。这提供了相同的用户体验，并且对箭头键、退格键、删除键、选择键……等工作:

document.querySelector('#num').addEventListener('input', function() {
    var badCharPos = this.value.search(/D/);
    if (badCharPos == -1) return; // all OK
    // remove offending characters:
    this.value = this.value.replace(/D/g, '');
    this.setSelectionRange(badCharPos, badCharPos);
});

<input id="num">