输入带+1国家码号码时按指定间隔插入短横线的JS实现方案

原有固定间隔插入短横线的逻辑仅适配银行卡号等长分段场景，要实现+1 123-123-1234格式的北美手机号格式化，可按如下逻辑改造：

核心处理思路 #

• 输入事件不要仅绑定keyup，同时绑定input事件，兼容鼠标粘贴、浏览器自动填充等非键盘输入场景
• 第一步先过滤输入值里所有非数字字符，避免用户手动输入的空格、短横线打乱分段规则
• 特殊处理空值场景：用户删除所有内容时输入框正常留空，不强制残留前缀
• 国家码逻辑：过滤后的纯数字如果以1开头，自动将第一位识别为国家码；如果开头不是1，自动补1作为国家码，保证前缀统一为+1
• 号码主体最多保留10位，超出长度直接截断，按照3位-3位-4位的规则分段拼接短横线

可直接使用的代码 #

// 将选择器替换为实际业务中手机号输入框的类名/ID即可
$('.phoneNumberInput').on('input keyup', function() {
  // 提取所有纯数字，过滤非数字字符
  let pureNumber = $(this).val().replace(/\D/g, '');

  // 内容清空时直接返回空值
  if (!pureNumber) {
    $(this).val('');
    return;
  }

  // 处理+1国家码前缀
  let countryCode = '1';
  if (pureNumber.startsWith('1')) {
    pureNumber = pureNumber.slice(1);
  }
  // 号码主体最多保留10位
  pureNumber = pureNumber.slice(0, 10);

  // 按3-3-4规则分段
  const segments = [];
  if (pureNumber.length > 0) segments.push(pureNumber.slice(0, 3));
  if (pureNumber.length > 3) segments.push(pureNumber.slice(3, 6));
  if (pureNumber.length > 6) segments.push(pureNumber.slice(6, 10));

  // 拼接最终格式化结果
  const formattedValue = `+${countryCode} ${segments.join('-')}`;
  $(this).val(formattedValue);
});

实际运行效果 #

• 输入纯数字1234567890，自动格式化为+1 123-456-7890
• 输入带国家码的数字11234567890，自动识别开头1为国家码，输出标准格式
• 粘贴带空格、短横线的杂乱号码（比如123 456-7890），会自动过滤无关符号后完成格式化
• 输入过程中达到分段长度时自动插入短横线，不会出现多余符号
• 全选删除内容时输入框会正常清空，不会残留无法删除的前缀

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