JavaScript中日文全角数字及圆点转半角问题求助

问题分析 #

你的代码存在几个导致转换异常的核心问题：

• checkNumber函数的正则判断逻辑有误：它要求整个输入字符串必须完全由全角/半角数字和圆点组成，用户输入过程中（比如混合输入半角与全角字符时）会触发输入拦截，导致正常输入被阻止。
• convertToHalfWidth用循环逐个替换字符，效率低且未利用Unicode字符的规律，容易出现匹配遗漏。
• 直接替换input的value会导致光标跳到输入框末尾，严重影响用户输入体验。

修复后的解决方案 #

以下是优化后的代码，解决了上述所有问题：

document.querySelector("input").addEventListener("input", handleInput);

function handleInput(event) {
    const target = event.target;
    const cursorPos = target.selectionStart; // 记录当前光标位置
    const inputValue = target.value;

    // 批量转换全角字符为半角，同时过滤非法字符
    const convertedValue = inputValue
        .replace(/[０-９．]/g, char => {
            const charCode = char.charCodeAt(0);
            // 全角数字转半角：U+FF10~U+FF19 对应 U+0030~U+0039，差值为0xFEE0
            if (charCode >= 0xFF10 && charCode <= 0xFF19) {
                return String.fromCharCode(charCode - 0xFEE0);
            }
            // 全角圆点转半角：U+FF0E 直接转为 U+002E
            else if (charCode === 0xFF0E) {
                return '.';
            }
            return char;
        })
        .replace(/[^0-9.]/g, ''); // 移除所有非半角数字和圆点的字符

    // 仅当值发生变化时更新输入框，并恢复光标位置
    if (target.value !== convertedValue) {
        target.value = convertedValue;
        // 计算光标偏移量，避免光标跳到末尾
        const diff = convertedValue.length - inputValue.length;
        target.setSelectionRange(Math.max(0, cursorPos + diff), Math.max(0, cursorPos + diff));
    }
}

<input>

代码说明 #

• 高效全角转半角：利用全角与半角字符的Unicode码点规律，通过正则批量替换，比循环替换更高效准确。
• 输入逻辑整合：将原checkNumber的验证逻辑合并到输入处理中，避免输入拦截异常，支持用户混合输入半角/全角字符。
• 光标位置修复：记录并恢复光标位置，解决替换后光标跳转到末尾的问题，提升用户输入体验。
• 严格字符过滤：转换完成后自动移除所有非允许字符，确保最终输入仅保留半角数字和圆点。

测试输入123４５６．７８９会正确转换为123456.789，同时支持实时输入转换，不会出现拦截异常。

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