输入框仅允许最多两位数字输入的正则规则问题排查

• 正则规则与校验对象不匹配：你使用的正则/^([0-9]{2})$/要求匹配恰好2位的数字字符串，但你传入校验的evnt.key是单次按键对应的单个字符（比如按下数字1时返回字符串"1"，长度为1），永远无法匹配2位的规则，所以所有输入都会被拦截，自然输入不了任何数字。
• 未结合输入框已有值校验：仅校验当前按下的字符，无法判断输入后总长度是否超过2位，就算修改单字符校验通过，也实现不了禁止输入第三位的需求。
• 未兼容功能按键：现有逻辑会直接拦截退格、删除、方向键等非数字的功能按键，用户无法正常编辑输入内容。

onlyAllowNumbers(evnt: KeyboardEvent): boolean {
    // 先放行所有常用功能按键
    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'];
    if (allowedKeys.includes(evnt.key)) {
        return true;
    }

    // 拦截非数字的输入
    const isSingleNumber = /^[0-9]$/.test(evnt.key);
    if (!isSingleNumber) {
        evnt.preventDefault();
        return false;
    }

    // 获取输入框当前已有值，判断长度是否超过限制
    const inputElement = evnt.target as HTMLInputElement;
    if (inputElement.value.length >= 2) {
        evnt.preventDefault();
        return false;
    }

    // 可选：额外校验最终值在0-99区间，避免异常场景
    const finalValue = inputElement.value + evnt.key;
    if (Number(finalValue) > 99 || Number(finalValue) < 0) {
        evnt.preventDefault();
        return false;
    }

    return true;
}

如果不需要复杂的自定义逻辑，也可以直接用输入框原生属性实现需求，代码更简洁：

<input type="number" min="0" max="99" maxlength="2" />

内容的提问来源于stack exchange，提问作者RRP