阻止OTP输入框输入特殊字符的JavaScript代码问题求助

问题根源 #

你当前的代码仅拦截了数字键（keyCode 48-57）的单独输入，但!@#$%^&*()这类特殊字符是通过Shift+数字键组合输入的。此时keydown事件中keyCode仍为数字键编码，但你未判断Shift键的按下状态，导致拦截逻辑失效——不仅没挡住特殊字符，反而因为阻止了数字键的默认行为，出现输入特殊字符却显示对应数字的异常。

解决方案 #

核心修正点

1. 绑定事件到具体输入框而非全局window，避免影响页面其他交互；
2. 增加event.shiftKey判断，拦截Shift+数字键的组合输入；
3. 推荐使用event.key替代已废弃的keyCode，提升代码可读性与兼容性。

修正后的代码

// 绑定到目标输入框，替换成你的选择器，比如#target-input
$('#target-input').keydown(function(event) {
    // 拦截Shift+数字对应的特殊字符：!@#$%^&*()
    const blockedSpecialChars = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'];
    if (event.shiftKey && blockedSpecialChars.includes(event.key)) {
        event.preventDefault();
        return false;
    }

    // 保留你原本需要拦截的其他按键
    const blockedKeyCodes = [116, 93, 33, 34, 123, 154, 82, 17, 38, 40, 13];
    if (blockedKeyCodes.includes(event.keyCode)) {
        event.preventDefault();
        return false;
    }
});

备选方案（基于keyCode判断）

如果坚持使用keyCode，可通过判断Shift键状态+数字键范围实现拦截：

$('#target-input').keydown(function(event) {
    // 拦截Shift+0-9的组合输入
    if (event.shiftKey && event.keyCode >= 48 && event.keyCode <= 57) {
        event.preventDefault();
        return false;
    }

    // 原有的其他按键拦截逻辑
    if (event.keyCode == 116 || event.keyCode == 93 || event.keyCode == 33 ||
        event.keyCode == 34 || event.keyCode == 123 || event.keyCode == 154 ||
        event.keyCode == 82 || event.keyCode == 17 || event.keyCode === 38 ||
        event.keyCode === 40 || event.keyCode === 13
    ) {
        event.preventDefault();
        return false;
    }
});

关键知识点 #

• keydown事件触发时，event.shiftKey会返回布尔值，表示Shift键是否被按下；
• keyCode已被ECMAScript标准废弃，现代浏览器优先使用event.key（直接返回按键对应的字符）或event.code（返回按键的物理位置编码）；
• 事件绑定到具体元素而非全局，能减少不必要的事件监听，提升性能与精准度。

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