Question

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

以下/ keyCode检查似乎是关于最流行的vanilla 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，但charCode为％（shift + 5）。更重要的是，这意味着箭头键不能用于导航（向左或向右移动插入符号/文本光标）。

然而，区别在于左箭头键为keyCode 37，而％charCode和which为37（如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属性。不仅存在与之相关的兼容性问题，而且还没有涵盖所有输入方式，例如鼠标和上下文菜单，并且deprecated：

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

KeyboardEvent.keyCode只读属性表示依赖于系统和实现的数字代码

相反，我建议使用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">

仅限数字的JavaScript Firefox解决方案

1 个答案: