如何在 HTML 输入字段中自动将数字格式化为印度计数法？

Question

我正在开发一个针对印度受众的金融 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;
});

该脚本不能很好地处理光标位置，尤其是在删除字符时，它可以将光标重置到行尾，这对用户不太友好。

如何改进此脚本以智能地处理光标位置，同时保持印度计数格式？ 是否有任何库或插件可以简化此功能？ 任何解决此问题的帮助或指示将不胜感激！

Answer 1

我不确定你的转换是否正确，因为它将

100000

转换为

100,000

，这不应该是

1,00,000

吗？

无论如何，以下方案应该适用于在保留数字的同时添加非数字的任何转换。它将光标之前的位数存储在

offset

中，然后执行转换并将光标再次放置在第

offset

之后。

为了定位光标的位置，它使用可编辑 Selection

 上的 

<div> 界面，而不是

<input>

元素。

onload = () => document.querySelector("div").focus();
function transformation(input) {
  return input.replaceAll(",", "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
document.querySelector("div").addEventListener("input", function(event) {
  var offset = event.target.textContent.substring(0, getSelection().focusOffset).match(/\d/g)?.length || 0;
  var s = transformation(event.target.textContent);
  event.target.textContent = s;
  getSelection().setPosition(event.target.firstChild, s.match(new RegExp(`^\\D*(\\d\\D*){${offset}}`))[0].length);
});

<div contenteditable></div>