如何用jQuery在keyup事件下格式化SSN输入并掩码除后4位外的内容

核心需求拆解 #

• 输入时自动补全短横线，匹配xxx-xx-xxxx的标准SSN格式
• 掩码除最后4位外的所有数字，最终显示为***-**-1234样式

改进后的代码 #

$(".ssnclass").on("input", function () {
    // 过滤掉所有非数字字符
    let rawValue = $(this).val().replace(/\D/g, '');
    // 按SSN格式拼接短横线，最多保留9位有效数字
    let formattedValue = rawValue.slice(0,3) + 
                         (rawValue.length > 3 ? '-' : '') + 
                         rawValue.slice(3,5) + 
                         (rawValue.length > 5 ? '-' : '') + 
                         rawValue.slice(5,9);
    // 掩码替换：将最后4位之前的数字转为*
    let maskedValue = formattedValue.replace(/\d(?=.*\d{4})/g, '*');
    $(this).val(maskedValue);
});

代码说明 #

• 用input事件替代keyup，能覆盖粘贴、右键输入等更多输入场景
• 先过滤非数字字符，确保只处理有效数字内容
• 分阶段添加短横线：输入超过3位时自动补第一个短横线，超过5位时补第二个
• 先完成格式拼接再做掩码处理，保证短横线位置不被错误替换
• 限制最多保留9位数字，符合SSN的长度规范

额外优化提示 #

• 给输入框添加maxlength="11"属性（格式化后总长度为11：3位数字+短横线+2位数字+短横线+4位数字），避免无效输入
• 若需要解决光标偏移问题，可以额外记录光标位置，格式化后恢复对应位置，避免输入时光标跳到末尾

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