优化JavaScript函数以禁止按键长按并过滤非法字符

我来帮你搞定这个问题！你的函数在正常输入时工作，但长按按键失效，主要有两个核心原因，咱们一步步优化：

问题根源分析 #

1. onkeyup事件的局限性：这个事件只在按键抬起时触发一次。当用户长按按键时，浏览器会连续向输入框插入字符，但中间过程不会触发keyup，只有最后松开按键时才会触发一次，导致中间输入的非法字符没被及时处理。
2. 正则表达式缺少全局匹配：你的正则/[\-&^_=+{}?\[\]\\!\£/>,~:;" ()|<*%#$]/`没有加`g`标识，调用`replace`时只会替换第一个匹配到的非法字符，长按生成多个非法字符时无法一次性清理干净。

优化后的代码 #

function tooltip(object, type) {
    // 直接使用传入的input元素，无需重复通过ID查询
    const element = object;
    let value = element.value;
    const parent = '#' + object.parentNode.id;
    const tooltip = document.getElementById("tooltip");
    
    // 添加全局匹配标识g，确保替换所有非法字符
    const illegalCharsRegex = /[\-&^_=+{}?\[\]\\!\£/>,`~:;" ()|<*%#\$]/g;
    let text = '';
    
    if (type === 'limited') {
        text = '输入包含非法字符，请修改'; // 建议明确提示文本
    }

    if (illegalCharsRegex.test(value)) {
        // 全局替换所有非法字符
        element.value = value.replace(illegalCharsRegex, '');
        
        // 优化tooltip创建逻辑：检查父元素下是否已存在tooltip，避免重复创建
        if (!tooltip && element.value !== '') {
            $(parent).append('<div id="tooltip"><div class="arrow arrow-down"></div>' + text + '</div>');
            
            setTimeout(function() {
                $(parent + ' #tooltip').fadeOut(500);
                setTimeout(function() {
                    $(parent + ' #tooltip').remove();
                }, 500);
            }, 5000);
        }
    }
}

对应的HTML修改：

<input id="username" type="text" oninput="tooltip(this, 'limited')">

关键修改点说明 #

• 替换onkeyup为oninput：input事件会在输入框内容任何变更时触发（包括长按连续输入、粘贴文本、输入法输入等），完美覆盖所有输入场景。
• 正则添加g标识：让replace一次性替换所有匹配到的非法字符，解决长按多字符残留的问题。
• 简化DOM查询：直接使用函数传入的object参数（就是当前输入框元素），避免重复调用getElementById，提升代码效率。
• 优化tooltip判断逻辑：确保不会重复创建tooltip，同时让提示文本更清晰，提升用户体验。

额外建议 #

• 如果需要更严格的输入控制，可以考虑结合keydown事件阻止非法字符的输入（不过input事件已经能很好处理大部分场景）。
• 测试时可以尝试长按非法字符、粘贴包含多个非法字符的文本，验证功能是否正常。

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