如何修复JavaScript数字转换时光标跳至末尾的问题

问题现象 #

选中tel类型输入框中间的数字，用波斯或阿拉伯键盘修改单个/多个数字时，光标会直接跳至输入框末尾；选中多个数字修改时，输入第一个数字后光标就跳转，导致后续输入错位。但使用英文键盘操作完全正常。

代码示例 #

const phoneNumberInput = document.getElementById('phoneNumberInput');
phoneNumberInput.addEventListener('input', (event) => {
  const phoneNumberValue = event.target.value;
  const englishPhoneNumberValue = toEnglishDigits(phoneNumberValue);
  const numericPhoneValue = englishPhoneNumberValue.replace(/[^\d۰-۹٠-٩]/g, '');
  event.target.value = numericPhoneValue;
});

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

  return str.split("").map(c => englishNumbers[persianNumbers.indexOf(c)] ||
    englishNumbers[arabicNumbers.indexOf(c)] || c).join("")
}

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

原因分析 #

1. 字符集差异导致光标同步异常：波斯/阿拉伯数字属于Unicode独立字符集，和英文ASCII数字的字符属性不同。当你在input事件中直接覆盖整个输入框的值时，浏览器无法正确同步光标位置，默认将光标重置到末尾；而英文数字输入时，浏览器能精准匹配原光标位置，不会触发重置。
2. 输入法事件打断光标逻辑：使用波斯/阿拉伯键盘输入时，浏览器会触发IME（输入法编辑器）的中间态事件，你的代码在input事件中直接替换值，打断了浏览器原本的光标位置维护流程，导致光标位置丢失。
3. 无差别值替换忽略光标位置：不管用户选中输入框哪个位置，代码都会直接替换整个输入框的值，没有保存和恢复光标位置的逻辑，自然会导致光标跳至末尾。

解决办法 #

核心思路是修改输入框值前保存光标位置，修改后恢复光标位置，调整后的代码如下：

const phoneNumberInput = document.getElementById('phoneNumberInput');
phoneNumberInput.addEventListener('input', (event) => {
  const input = event.target;
  // 保存当前光标选中范围
  const startPos = input.selectionStart;
  const endPos = input.selectionEnd;
  
  const originalValue = input.value;
  const englishValue = toEnglishDigits(originalValue);
  // 转成英文数字后，正则简化为只保留数字
  const filteredValue = englishValue.replace(/[^\d]/g, '');
  
  // 仅当值发生变化时才替换，避免不必要的光标操作
  if (filteredValue !== originalValue) {
    input.value = filteredValue;
    // 计算长度差，调整光标位置
    const lengthDelta = filteredValue.length - originalValue.length;
    input.setSelectionRange(startPos + lengthDelta, endPos + lengthDelta);
  }
});

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 persianIdx = persianNumbers.indexOf(c);
    if (persianIdx !== -1) return englishNumbers[persianIdx];
    const arabicIdx = arabicNumbers.indexOf(c);
    if (arabicIdx !== -1) return englishNumbers[arabicIdx];
    return c;
  }).join("");
}

关键改进点 #

• 提前保存selectionStart和selectionEnd，记录用户操作前的光标位置
• 仅当过滤后的值和原输入值不同时才替换，避免无意义的光标重置
• 根据替换前后的长度差调整光标位置，确保光标停留在用户预期的位置

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