如何验证数字输入的KeyboardEvent值

Question

我有一个类型为number的输入。Chromium浏览器似乎也限制了输入，但firefox没有，这是一个问题(对我们的产品经理来说(。所以我想明白了，为什么不在通过Keydown、Keyup或Keypress等事件进行输入时进行过滤呢。

我首先做了这个功能来过滤我的输入：

public filterInput(event: KeyboardEvent){
//ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
event.preventDefault();
}
}

然而，我正在考虑推广这个函数，并使其类似于

public filterInput(event: KeyboardEvent, regExPattern: string | RegExp){
const keyCodesArray: Array<number> = [..., 8, 46, 37, 39]; //get all possible keyCodes in that pattern + allow right/left arrows, backspace and delete
//check whether keycode is included or not. 
if (!keyCodesArray.includes(event.keyCode)) {
event.preventDefault();
}
}

经过搜索和深入研究，我想出了这样一个通用功能：

public filterInput(event: KeyboardEvent, regEx: RegExp){
const restrict = !regEx.test(event.key) && event.key != "Backspace" && event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Delete";
if (restrict){
event.preventDefault();
}
}

我担心的是表现可能不好，或者我可能遗漏了什么例外。此外，我真的不喜欢与字符串(Backspace、Delete、ArrowLeft和ArrowRight(进行比较。

有什么可行但又有用的更好的方法可以做到这一点吗？还是我应该坚持上面的函数。

很高兴听到你的建议。

Answer 1

• 不要使用ev.keyCode

• 不要使用黑名单过滤器(允许任何值，除了x、y、z…(

---

• 是否使用ev.key

• 是否使用白名单过滤器(唯一允许的值为a、b、c…(

---

建议：

• 使用有效ev.key值的Set：

  if (!set.has(ev.key)) ev.preventDefault();
  

• 如果您关心与ev.key进行比较时的字符串类型验证，则可以在此处测试值，并创建字符串枚举或字符串文字的并集以供程序使用。