type为number的输入框阿拉伯数字转英文及限制输入实现方案

针对type="number"输入框阿拉伯语键盘输入非英文数字的场景，可通过以下两种方案实现需求，可根据业务场景选择：

方案1：实时转换阿拉伯语数字为英文格式数字 #

该方案不打断用户输入，自动完成字符转换，体验更友好。
实现逻辑：

• 阿拉伯语数字的Unicode编码范围为U+0660~U+0669，和0-9的英文数字一一对应
• 监听输入框的input事件，对输入内容做正则匹配替换即可
  代码示例：

<input type="number" id="numInput">

const numInput = document.getElementById('numInput');
// 阿拉伯语数字-英文数字映射表
const numMap = {
  '٠': '0', '١': '1', '٢': '2', '٣': '3', '٤': '4',
  '٥': '5', '٦': '6', '٧': '7', '٨': '8', '٩': '9'
};

numInput.addEventListener('input', e => {
  let val = e.target.value;
  // 匹配所有阿拉伯语数字并替换
  val = val.replace(/[٠-٩]/g, match => numMap[match]);
  e.target.value = val;
});

方案2：禁止输入非英文格式数字 #

该方案严格限制输入内容，仅允许英文数字输入，适合对输入格式要求极高的场景。
实现逻辑：

• 监听beforeinput事件，拦截非英文数字的输入
• 补充监听paste事件，处理粘贴场景下的非法字符过滤
  代码示例：

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

// 拦截实时输入的非法字符
numInput.addEventListener('beforeinput', e => {
  // 仅允许英文数字输入，也可根据需求调整正则支持小数、负号等
  if (e.data && !/^\d*$/.test(e.data)) {
    e.preventDefault();
  }
});

// 处理粘贴场景
numInput.addEventListener('paste', e => {
  e.preventDefault();
  const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
  // 过滤所有非英文数字的字符后插入
  const filteredContent = pasteContent.replace(/[^\d]/g, '');
  document.execCommand('insertText', false, filteredContent);
});

注意：如果需要支持小数、负数输入，可将上述正则调整为/^[\d\.\-]*$/，按需匹配允许的符号即可。

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