如何验证数字输入的 KeyboardEvent 值？

Question

我正在输入类型编号。 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();
    }
}

我担心性能可能很差，或者我可能会遗漏任何例外情况。此外，我不太喜欢与字符串（退格键、删除键、ArrowLeft 和 ArrowRight）进行比较的想法。

有什么可以想到但也有用的更好的方法吗？或者我应该坚持上面的功能。

很高兴听到您的建议。

Answer 1

不要使用ev.keyCode
不要使用黑名单过滤器（允许任何值，除了 x， y, z...)

做使用ev.key
Do 使用白名单过滤器（仅允许的值为 a、b, c...)

建议：

使用 Set 个有效 ev.key 值：

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

如果您担心与 ev.key 比较时的字符串类型验证，您可以测试程序中使用的字符串文字的值 here and create a string enum or union。

如何验证数字输入的 KeyboardEvent 值？

How to validate KeyboardEvent values for a number input?

javascript

regex

keyboard-events

typescript