JSFiddle - React, Tailwind, and code Playground

by paulvek

HTML

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

JavaScript

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("")
}