通过keyup事件监听器格式化电话号码输入异常问题排查

问题排查与解决 #

你怀疑的正则行const input = event.target.value.replace(/\D/g,'').substring(0,10);本身逻辑没有问题：/\D/g会全局匹配所有非数字字符替换为空，再截取前10位纯数字，只要是标准JS运行环境，这行的执行结果不会有差异。你遇到的不同环境表现不一致，大概率是以下几个原因导致的：

• 站点上存在其他同时监听该输入框的事件脚本，比如表单校验插件、其他格式化逻辑，和你写的这段代码同时修改输入框值，产生冲突，出现字符替换错误。
• 绑定的事件类型有误：如果是用keyup/keydown事件而非input事件触发格式化，在用户粘贴输入、使用中文输入法的时候会触发多次逻辑，导致值被重复格式化异常。
• 没有处理光标位置偏移：你每次修改target.value后，输入光标会自动跳到输入框末尾，测试时如果都是从左到右顺次输入不会有问题，但实际使用时用户如果在中间插入、删除字符，就会出现输入错位，看起来像是字符被错误替换。
• 站点引入的第三方库修改了原生字符串方法：部分老旧工具库会重写replace、substring等原生方法，导致执行结果不符合预期。

修复建议 #

1. 先在正则行后增加日志打印确认正则执行结果，就能快速排除正则本身的问题：

const input = event.target.value.replace(/\D/g,'').substring(0,10);
console.log('提取到的纯数字：', input);

2. 统一用input事件触发格式化，检查输入框是否绑定了其他事件监听器，避免逻辑冲突。
3. 增加光标位置还原逻辑，避免输入错位，参考优化后的完整代码：

// inputElement替换为你的电话号码输入框DOM节点
inputElement.addEventListener('input', function(e) {
  const target = e.target;
  // 记录当前光标位置
  const cursorPos = target.selectionStart;
  // 提取纯数字
  const input = target.value.replace(/\D/g, '').substring(0,10);
  const areacode = input.substring(0,3);
  const gr1 = input.substring(3,6);
  const gr2 = input.substring(6,8);
  const gr3 = input.substring(8,10);

  let formattedValue = '';
  if(input.length > 7) {
    formattedValue = `${areacode}-${gr1} ${gr2} ${gr3}`;
  } else if(input.length > 5) {
    formattedValue = `${areacode}-${gr1} ${gr2}`;
  } else if(input.length > 2) {
    formattedValue = `${areacode}-${gr1}`;
  } else if(input.length > 0) {
    formattedValue = areacode;
  }
  // 赋值格式化后的值
  target.value = formattedValue;
  // 还原光标位置，处理添加分隔符后的偏移
  let newCursorPos = cursorPos;
  if (cursorPos > 3) newCursorPos += 1; // 前3位后有-，偏移1
  if (cursorPos > 6) newCursorPos += 1; // 第6位后有空格，偏移1
  if (cursorPos > 8) newCursorPos += 1; // 第8位后有空格，偏移1
  target.setSelectionRange(Math.min(newCursorPos, formattedValue.length), Math.min(newCursorPos, formattedValue.length));
})

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