JavaScript中光标恢复与数字格式化兼容异常问题咨询

• 光标位置未适配格式化后的字符串：代码在格式化操作前获取光标位置，但格式化后的字符串会自动插入空格（如#### ### ####格式包含两个空格），原始光标位置没有考虑这些新增字符的长度偏移，直接复用会导致光标定位错误。
• 选中修改时的位置逻辑失效：选中多个字符修改时，原始选中范围基于未处理的输入值，格式化后有效数字的位置与原始输入的对应关系被打乱，导致新内容无法替换到目标区域，光标也无法正确定位。
• 未区分有效数字与格式化字符：处理过程中没有将用户输入的有效数字和自动添加的空格做区分，光标位置计算时误将空格纳入用户输入的位置计数，进一步加剧偏移问题。

核心思路是：先提取用户输入的有效数字，计算原始光标位置在有效数字中的对应索引，再根据格式化规则将该索引映射到格式化后的字符串位置，确保光标和内容替换逻辑正确。

修改后的完整代码：

const phoneNumberInput = document.getElementById('phoneNumberInput');

phoneNumberInput.addEventListener('input', (event) => {
  const originalValue = event.target.value;
  const originalSelectionStart = phoneNumberInput.selectionStart;
  const originalSelectionEnd = phoneNumberInput.selectionEnd;

  // 转换为英文数字并提取有效数字（过滤非数字字符）
  const englishDigits = toEnglishDigits(originalValue);
  const rawDigits = englishDigits.replace(/[^\d]/g, '');

  // 计算原始光标位置对应的有效数字索引
  let digitStart = 0;
  let digitEnd = 0;
  for (let i = 0; i < originalValue.length; i++) {
    const char = originalValue[i];
    // 只统计有效数字的位置
    if (!isNaN(parseInt(char)) && char !== ' ') {
      if (i < originalSelectionStart) digitStart++;
      if (i < originalSelectionEnd) digitEnd++;
    }
  }

  // 格式化有效数字（适配不同长度的输入）
  const formatted = formatPhoneNumber(rawDigits);

  // 将有效数字索引映射到格式化后的字符串位置
  let newSelectionStart = 0;
  let newSelectionEnd = 0;
  let digitCount = 0;
  for (let i = 0; i < formatted.length; i++) {
    const char = formatted[i];
    if (char !== ' ') {
      if (digitCount === digitStart) newSelectionStart = i;
      if (digitCount === digitEnd) newSelectionEnd = i;
      digitCount++;
    }
    // 处理光标在输入末尾的情况
    if (digitCount === rawDigits.length && (digitStart >= rawDigits.length || digitEnd >= rawDigits.length)) {
      newSelectionStart = formatted.length;
      newSelectionEnd = formatted.length;
    }
  }

  // 更新输入框值
  event.target.value = formatted;

  // 延迟设置光标，确保输入框值更新完成
  setTimeout(() => {
    phoneNumberInput.setSelectionRange(newSelectionStart, newSelectionEnd);
  }, 0);
});

function toEnglishDigits(str) {
  const persianNumbers = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];
  const arabicNumbers = ["١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩", "٠"];
  const englishNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

  return str.split("").map(c => {
    const persianIndex = persianNumbers.indexOf(c);
    if (persianIndex !== -1) return englishNumbers[persianIndex];
    const arabicIndex = arabicNumbers.indexOf(c);
    if (arabicIndex !== -1) return englishNumbers[arabicIndex];
    return c;
  }).join("");
}

function formatPhoneNumber(phoneNumber) {
  if (phoneNumber.length <= 4) return phoneNumber;
  if (phoneNumber.length <= 7) return `${phoneNumber.slice(0,4)} ${phoneNumber.slice(4)}`;
  return `${phoneNumber.slice(0,4)} ${phoneNumber.slice(4,7)} ${phoneNumber.slice(7,11)}`;
}

<input type="tel" id="phoneNumberInput" maxlength="13" />

关键优化点 #

• 分离有效数字与格式化字符：先提取所有有效数字，忽略空格和非数字字符，确保光标位置计算基于用户实际输入的数字。
• 光标位置映射：将原始光标位置转换为有效数字的索引，再根据格式化规则（插入空格的位置），将索引转换为格式化后的字符串位置。
• 末尾光标处理：当光标位于输入末尾时，直接定位到格式化后的字符串末尾，避免偏移错误。
• 延迟设置光标：通过setTimeout确保输入框值更新完成后再设置光标，规避浏览器默认输入行为的干扰。

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