实现+1格式电话自动填充遇问题：号码被覆盖且无法退格

需求 #

希望id为primary_phone的输入框在keyup事件触发时，自动将内容格式化为+1 (XXX) XXX-XXXX的格式。

原实现代码 #

jQuery 代码 #

$('#primary_phone').keyup(function() {
    var phoneNumber = $(this).val();
    phoneNumber = phoneNumber.replace(/[^\d]/g, ''); // 移除非数字字符
    phoneNumber = phoneNumber.substring(0, 10); // 限制为10位数字

    var formattedPhoneNumber = '+1 (' + phoneNumber.substring(0, 3) + ') ' + phoneNumber.substring(3, 6) + '-' + phoneNumber.substring(6, 10);

    $(this).val(formattedPhoneNumber);
});

HTML 输入框 #

<input type="text" name="primary_phone" id="primary_phone" size="30" maxlength="255" value="" title="" tabindex="0" class="phone">

现存问题 #

• 前缀+1中的数字1会被当作用户输入的号码内容，导致真实输入的首位数字被覆盖
• 无法通过退格键删除+1 (1) -这类固定格式片段，编辑体验极差

修复后的代码 #

jQuery 代码 #

$('#primary_phone').keyup(function(e) {
    // 放行控制键（退格、删除、左右箭头），避免格式强制锁定
    const allowedControlKeys = [8, 46, 37, 39];
    if (allowedControlKeys.includes(e.keyCode)) {
        return;
    }

    let rawNumber = $(this).val();
    // 移除所有非数字字符，再剔除开头的1（前缀+1为固定格式，不属于用户输入的10位号码）
    rawNumber = rawNumber.replace(/[^\d]/g, '').replace(/^1/, '');
    // 严格限制用户输入的数字长度为10位
    rawNumber = rawNumber.substring(0, 10);

    let formattedNumber = '+1 ';
    // 根据输入长度逐步拼接格式
    if (rawNumber.length >= 3) {
        formattedNumber += `(${rawNumber.substring(0, 3)}) `;
        if (rawNumber.length >= 6) {
            formattedNumber += `${rawNumber.substring(3, 6)}-${rawNumber.substring(6, 10)}`;
        } else {
            formattedNumber += rawNumber.substring(3);
        }
    } else {
        formattedNumber += rawNumber;
    }

    $(this).val(formattedNumber);
});

修复说明 #

1. 排除前缀干扰：移除所有非数字字符后，主动删除开头的1，确保前缀的+1不会混入用户输入的10位号码中
2. 保留编辑自由度：加入控制键判断，允许用户使用退格、删除、方向键正常调整输入内容
3. 渐进式格式拼接：根据用户输入的数字长度逐步构建格式化字符串，避免出现空括号、多余分隔符等不友好的中间状态

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