如何在JavaScript中通过event.keyCode阻止指定特殊字符输入（移动端适配）

需求背景 #

需要获取! @ # $ % ^ & * ( ) .这些特殊字符对应的准确event.keyCode值，同时复用现有的jQuery键盘事件函数在移动端阻止这些字符输入，但尝试使用的keyCode数值无效。

现有桌面端代码 #

$(window).keydown(function (event) {
    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;
    }
});

无效的移动端keyCode尝试 #

event.keyCode == 161 || event.keyCode == 64 || event.keyCode == 163 ||
event.keyCode == 164 || event.keyCode == 165 || event.keyCode == 160 ||
event.keyCode == 166 || event.keyCode == 171 || event.keyCode === 168 ||
event.keyCode === 169

问题根源 #

keyCode已被标记为废弃属性，在移动端软键盘场景下兼容性极差：

• 移动端软键盘并非物理键盘，多数情况下不会返回标准的keyCode值，不同输入法、设备返回的数值完全无规律
• 特殊字符通常需要组合键（如Shift+数字）触发，软键盘直接输入时不会触发对应的组合键keyCode

解决方案：改用输入内容监听 #

放弃依赖keyCode，改用input事件直接监听输入内容，过滤禁止的字符，这种方式同时兼容桌面端和移动端：

$(window).on('input', function(event) {
    // 定义需要拦截的特殊字符集合
    const forbiddenChars = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '.'];
    const target = event.target;
    
    // 仅处理输入框和文本域
    if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
        const originalValue = target.value;
        // 过滤掉禁止的字符
        const filteredValue = originalValue.split('').filter(char => !forbiddenChars.includes(char)).join('');
        
        if (filteredValue !== originalValue) {
            target.value = filteredValue;
            // 修正光标位置，避免删除字符后光标跳到开头
            const cursorOffset = originalValue.length - filteredValue.length;
            const cursorPos = target.selectionStart - cursorOffset;
            target.setSelectionRange(cursorPos, cursorPos);
        }
    }
});

补充知识点 #

物理键盘下的标准keyCode（仅作参考，移动端无效） #

这些是桌面物理键盘输入对应字符时的keyCode值（注意特殊字符多为Shift+数字键触发，keyCode返回的是基础数字键的编码）：

• !：49（对应Shift+1）
• @：50（对应Shift+2）
• #：51（对应Shift+3）
• $：52（对应Shift+4）
• %：53（对应Shift+5）
• ^：54（对应Shift+6）
• &：55（对应Shift+7）
• *：56（对应Shift+8）
• (：57（对应Shift+9）
• )：48（对应Shift+0）
• .：190

推荐的替代属性 #

• event.key：返回实际输入的字符（如输入!则返回"!"），兼容性好，适合判断输入内容
• event.code：返回物理按键的编码（如Shift+1的code为Digit1），适合判断按键操作而非输入内容

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