javascript - 正则表达式仅允许数字且最多 2 位数字

Question

我正在开发一个输入字段，该字段应允许用户输入 0 到 99 之间的数字。此外，不应允许用户输入第三位数字。

为了解决上述问题，我有以下正则表达式 /^([0-9]{2})$/

我有以下在按键事件上触发的函数

    onlyAllowNumbers(evnt: KeyboardEvent): boolean {
        const charCode = evnt.key;
        const pattern = /^([0-9]{2})$/;

        return pattern.test(charCode);
}

上述模式不允许我在输入字段中输入任何数字。

Answer 1

我建议更新正则表达式以允许 0 或 2 位数字 - /^[0-9]{0,2}$/。

以下值将匹配:''、'0'、'1'、...'10'、...'99'。

keypress 事件具有以下字段:

• event.target.value - 按下新键之前输入的值
• event.key - 按下的键的字符串值

当event.target.value和event.key组合在一起时，我们可以估计输入的新值。

如果结果值与所需模式不匹配，

event.preventDefault() 调用可用于阻止按键事件。

document.getElementById('myinput').addEventListener('keypress', event => {
    if (!`${event.target.value}${event.key}`.match(/^[0-9]{0,2}$/)) {
        // block the input if result does not match
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
});

<input id="myinput" type="text" value="" />