如何修复 JavaScript 中转换数字时光标打字机跳转到结尾的问题？

Question

按照问题在JavaScript中转换数字的解决方案和正确方法是什么？和如何在JavaScript中转换数字，以及使用电话输入在键盘上删除非数字字符的命令的问题，我想要表达其他问题之一。

转换数字的方法没有任何差异，但是在所有方法中，我都遇到了一些问题。

我的问题是，如果用鼠标或触摸（在移动设备上）选择数字中间的数字并更改一个或多个数字，键盘打字机指针会跳到末尾。请参阅下面粘贴的图片以进行澄清，还添加一个 JSFiddle 链接。

https://jsfiddle.net/paulvek/4js965fr/7/

const phoneNumberInput = document.getElementById('phoneNumberInput');
phoneNumberInput.addEventListener('input', (event) => {
  const phoneNumberValue = event.target.value;
  const englishPhoneNumberValue = toEnglishDigits(phoneNumberValue);
  const numericPhoneValue = englishPhoneNumberValue.replace(/[^\d۰-۹٠-٩]/g, ''); // Added line
  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" />

如果用户用英文键盘选择中间数字之一并更改它，则该位置将发生变化，并且相同类型指针的闪烁类型指示器将保留在那里。

但是，如果他/她使用波斯语或阿拉伯语键盘选择并更改中间数字之一，则更改正确完成。但问题是文本光标跳到了末尾。

仅在输入或粘贴波斯语和阿拉伯语时才会出现此问题。可能是什么问题？

仅当他/她想从号码中选择两个或三个号码并更改它们时。通过写第一个数字，它会跳到末尾，然后第二个数字（本应写在第一个数字旁边，在他选择的同一位置）跳到末尾，这会弄乱一切。如果你测试一下，你会发现英语不存在这样的问题。

Answer 1

我通过遵循评论和建议的解决方案解决了这个问题。

现在这是运行良好的代码。经过测试并有效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phone Number Input</title>
</head>
<body>

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

<script>
const phoneNumberInput = document.getElementById('phoneNumberInput');
let cursorStart = 0; // Variable to store the start position of the selection
let cursorEnd = 0;   // Variable to store the end position of the selection

phoneNumberInput.addEventListener('input', (event) => {
  const phoneNumberValue = event.target.value;

  // Get the current cursor position
  cursorStart = phoneNumberInput.selectionStart;
  cursorEnd = phoneNumberInput.selectionEnd;

  const englishPhoneNumberValue = toEnglishDigits(phoneNumberValue);
  const numericPhoneValue = englishPhoneNumberValue.replace(/[^\d۰-۹٠-٩]/g, '');

  // Update the value
  event.target.value = numericPhoneValue;

  // Set the cursor position back to the original position
  phoneNumberInput.setSelectionRange(cursorStart, cursorEnd);
});

function toEnglishDigits(str) {
  // Your toEnglishDigits function remains unchanged
  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("");
}
</script>

</body>
</html>

如何修复 JavaScript 中转换数字时光标打字机跳转到结尾的问题？

问题描述投票：0回答：1

1个回答

最新问题

如何修复 JavaScript 中转换数字时光标打字机跳转到结尾的问题？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1