如何在HTML输入框中自动按印度计数法格式化数字？

问题描述 #

我正在开发一款面向印度用户的金融Web应用，需要实现用户在输入框中输入金额时，自动按印度计数法（例如用“1,00,000”表示十万）动态格式化数字，以体现印度计数体系中的十万、千万等单位的逗号分隔规则。

我尝试用基础JavaScript处理输入值，但遇到了光标定位异常和退格操作导致输入不稳定的问题。以下是我测试的基础代码：

document.getElementById('myInput').addEventListener('input', function (e) {
    var x = e.target.value.replace(/,/g, '');
    x = x.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    e.target.value = x;
});

该脚本无法妥善处理光标位置，尤其是删除字符时会将光标重置到行末，用户体验不佳。

请问如何改进该脚本，使其在保持印度计数法格式化的同时智能处理光标位置？是否有可简化此功能的库或插件？

解决方案 #

一、原生JavaScript改进版（处理光标定位） #

首先修正印度计数法的格式化逻辑（原代码采用西方三位分隔规则，不符合印度体系），同时添加光标位置计算与恢复逻辑，解决输入/删除时光标跳位问题：

document.getElementById('myInput').addEventListener('input', function(e) {
    const input = e.target;
    let rawValue = input.value.replace(/,/g, '');
    
    // 清空输入时直接返回
    if (!rawValue) {
        input.value = '';
        return;
    }

    // 实现印度计数法格式化：最后三位连续，前面每两位分隔
    let formattedValue;
    if (rawValue.length <= 3) {
        formattedValue = rawValue;
    } else {
        const lastThreeDigits = rawValue.slice(-3);
        const prefixDigits = rawValue.slice(0, rawValue.length - 3);
        // 对前缀部分从右往左每两位加逗号
        formattedValue = prefixDigits.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + ',' + lastThreeDigits;
    }

    // 记录光标原始位置与输入类型
    const originalCursorStart = input.selectionStart;
    const originalCommaCount = (input.value.match(/,/g) || []).length;
    const newCommaCount = (formattedValue.match(/,/g) || []).length;
    
    // 计算光标偏移量：逗号增减导致的位置变化
    let newCursorPosition = originalCursorStart + (newCommaCount - originalCommaCount);

    // 处理退格/删除操作的特殊情况：如果删除的是逗号，光标位置需要额外调整
    if (['deleteContentBackward', 'deleteContentForward'].includes(e.inputType)) {
        const isDeletingComma = input.value.charAt(originalCursorStart - 1) === ',';
        if (isDeletingComma) {
            newCursorPosition -= 1;
        }
    }

    // 确保光标位置在合法范围内
    newCursorPosition = Math.max(0, Math.min(newCursorPosition, formattedValue.length));

    // 更新输入值并恢复光标位置
    input.value = formattedValue;
    input.setSelectionRange(newCursorPosition, newCursorPosition);
});

关键改进点：

• 修正格式化规则：严格遵循印度计数法，将数字分为「最后三位」和「前缀部分」，前缀部分从右往左每两位添加逗号（如12345678 → 1,23,45,678）。
• 光标位置计算：通过对比格式化前后的逗号数量，计算光标需要偏移的距离，避免重置到末尾。
• 删除操作适配：针对退格/删除动作，判断是否删除了逗号，调整光标位置以符合用户操作预期。

二、使用成熟库简化开发 #

如果不想手动处理复杂的光标和格式化逻辑，推荐以下专门用于数字格式化的库：

1. Numeral.js

支持自定义区域设置，可以一键配置印度计数法：

// 注册印度区域配置
numeral.register('locale', 'in', {
    delimiters: {
        thousands: ',',
        decimal: '.'
    },
    abbreviations: {
        thousand: 'k',
        million: 'l',
        billion: 'cr'
    },
    currency: {
        symbol: '₹'
    }
});

// 设置默认区域为印度
numeral.locale('in');

// 格式化示例
console.log(numeral(1234567).format('0,0')); // 输出 "12,34,567"

结合输入框事件时，只需在输入回调中调用库的格式化方法，再复用上述光标位置处理逻辑即可。

2. Accounting.js

专注于金融数字格式化，支持自定义分隔规则：

// 自定义印度计数法格式化函数
const formatIndianNumber = (num) => {
    const numStr = num.toString().replace(/,/g, '');
    if (numStr.length <= 3) return numStr;
    const lastThree = numStr.slice(-3);
    const rest = numStr.slice(0, numStr.length - 3);
    return rest.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + ',' + lastThree;
};

// 使用示例
console.log(formatIndianNumber(12345678)); // 输出 "1,23,45,678"

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