文本框仅允许字母数字输入的jQuery正则方案问题求助

问题分析 #

你当前代码存在两个核心问题：

• 正则表达式错误：/[^a-zA-Z0-9 _]/g 允许了空格输入，不符合「不含空格」的需求
• 仅依赖keyup事件：属于事后清理逻辑，快速输入或连续按键时可能因事件触发延迟导致失效

优化实现 #

结合keypress（实时拦截非法输入）和keyup（处理粘贴/特殊场景残留），同时修正正则逻辑，确保输入全程符合要求：

// 验证单个字符是否为字母数字
function isValidAlphanumeric(char) {
    return /^[a-zA-Z0-9]$/.test(char);
}

// 清理输入框中的非法字符（处理粘贴等场景）
function cleanInvalidInput(obj) {
    obj.value = obj.value.replace(/[^a-zA-Z0-9]/g, '');
}

$(document).on("keypress", "#fgCode, #sfgCode, #npdPlant, #plant", function(e) {
    // 允许控制键（退格、删除、箭头键、回车等）
    const controlKeys = [8, 9, 13, 46, 37, 38, 39, 40];
    if (controlKeys.includes(e.which)) {
        return;
    }
    
    const inputChar = String.fromCharCode(e.which);
    // 非字母数字则阻止输入
    if (!isValidAlphanumeric(inputChar)) {
        e.preventDefault();
    }
}).on("keyup", "#fgCode, #sfgCode, #npdPlant, #plant", function() {
    // 清理可能的非法内容（如右键粘贴）
    cleanInvalidInput(this);
});

关键改进点 #

• 实时拦截：keypress事件在字符输入前直接阻止非法内容，避免事后删除的延迟感
• 覆盖全场景：keyup处理粘贴、拖拽输入等keypress无法捕获的操作
• 精准正则：严格限制仅允许a-z、A-Z、0-9，彻底排除空格和其他符号
• 控制键兼容：保留退格、箭头键等必要操作，不影响用户正常编辑体验

额外建议 #

如果需要兼容移动端输入，可以补充input事件处理，适配移动端输入法的特殊触发逻辑：

$(document).on("input", "#fgCode, #sfgCode, #npdPlant, #plant", function() {
    cleanInvalidInput(this);
});

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