如何将输入数字框中的阿拉伯数字转为英文数字？求jQuery解决方案

我来帮你排查下问题～你的代码核心转换逻辑是没问题的，但有几个关键细节没处理到位，导致功能没生效。咱们一步步来修复：

问题分析 #

1. 转换结果未赋值回输入框：你在keyup事件里调用了转换函数，但只是计算出了结果，却没有把它设置回输入框的value属性，所以输入框内容完全没变化。
2. 替换范围不完整：你的ar数组里包含了除数字外的其他特殊字符，但循环只跑了10次（仅处理前10个阿拉伯数字），像٫这种阿拉伯小数点根本没被替换。
3. 事件覆盖场景有限：keyup事件只能捕获键盘输入，无法处理粘贴、右键菜单输入等场景，换成input事件会更靠谱。

修正后的完整代码 #

function toEnglishNumber(strNum) {
    // 处理空值，避免undefined/null导致报错
    if (!strNum) return strNum;
    
    var ar = [ '٠','١','٢','٣','٤','٥','٦','٧','٨','٩',' ','-','/','|','~','٫' ];
    var en = [ '0','1','2','3','4','5','6','7','8','9','','','','','','.' ];
    var cache = strNum;
    
    // 遍历整个字符数组，确保所有需要替换的字符都被处理
    for (var i = 0; i < ar.length; i++) {
        var regex_ar = new RegExp(ar[i], 'g');
        cache = cache.replace(regex_ar, en[i]);
    }
    return cache;
}

// 用input事件覆盖更多输入场景，同时处理光标位置
$(document).on('input', '.arabicNumbers', function() {
    const $input = $(this);
    // 保存当前光标位置，避免替换后光标跳到末尾
    const cursorPosition = $input[0].selectionStart;
    
    // 转换后赋值回输入框
    const convertedValue = toEnglishNumber($input.val());
    $input.val(convertedValue);
    
    // 恢复光标位置，提升用户体验
    $input[0].selectionStart = $input[0].selectionEnd = cursorPosition;
});

额外优化点说明 #

• 加入了空值判断：防止输入框为空时出现replace调用报错的情况；
• 完整遍历字符数组：确保所有你定义的需要替换的阿拉伯字符都被转换为对应的英文格式；
• 光标位置保持：用户输入过程中，光标不会因为内容替换突然跳到输入框末尾，体验更流畅；
• input事件：覆盖键盘输入、鼠标粘贴、拖拽输入等所有内容变更场景，比keyup更健壮。

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