Javascript 在文本框中自动填充逗号和小数

我有一个美元金额的文本框（下面是html）。我试图添加一些css或jquery，以便在用户在文本框中输入值时自动填充逗号和小数。例如，如果用户输入123456789，它将自动变为12345667.89

<html:text styleId="incomePerPeriod" styleClass="textbox" property="employment.incomePerPeriod" maxlength="10" />

函数addCommas（x）{
var parts=x.toString（）.split（“.”）；
零件[0]=零件[0]。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”；
返回零件。连接（“.”）；
}
$（'#num'）。按键（函数（）{
var numberTyped=$（“#num”）.val（）；
var convertedNum=addCommas（numberTyped）；
$（“#num”）.val（convertedNum）；
});

该脚本使用正则表达式添加逗号。传递类似23456789.12345的数字会产生23456789.12345，这是所需的结果

第二个例子

---

这里有一个解决方案，它可以格式化数字

onkeyup

，以获得

输入的实际值

按键
事件检查有效键（例如，仅数字和退格）。这可能会被完善并转移到js事件监听器

格式化程序正则表达式也可以调整为处理小数

这里有一个片段。希望能有帮助


isNumberKey=函数（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（charCode！=46&&charCode>31
&&（字符编码<48 | |字符编码>57））
返回false；
返回true；
}
var textInput=document.getElementById（'txtChar'）；
textInput.addEventListener（'keyup'，函数（evt）{
var n=parseInt（这个.value.replace（/\D/g'），10）；
textInput.value=n.ToLocalString（）；
}，假）
纯JS字符串函数可能会更简单，也可能不会更简单，但这里是一个regexp版本

问题是，我找不到将输入的数字字符串分组到
中的方法。。。nnn nn
与regexp匹配。然而，得到像
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn。。。nnn n？？？
。这是正则表达式

/(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g

因此，我反转字符串以如下方式开始：

Array.prototype.reduce.call(str,(p,c) => c + p)

然后使用
.match（rex）
将正则表达式应用于我的反向字符串，其工作原理类似于，
“123456789”
以产生
['98'、'765'、'432'、'1']

然后在适当的位置用
和
，
将它们连接起来

.reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c)

并获取
98.765432,1
。当然，我们只需要再次反转这个字符串。这是一个有效的例子


函数格式编号（e）{
var rex=/（^\d{2}）|（\d{1,3}）（？=\d{1,3}|$）/g，
val=this.value.replace（/^0+\.\124;，/g，“”），
物件；
if（val.length）{
res=Array.prototype.reduce.call（val，（p，c）=>c+p）//反转纯数字字符串
.match（rex）//获取数组中的组
.减少（（p，c，i）=>i-1？p+，“+c:p+”；//相应地插入（.）和（，）
res+=/\.\124;，/.test（res）？“”：“.0”//测试res中是否有（.）或（，）
this.value=Array.prototype.reduce.call（res，（p，c）=>c+p）；//反转字符串并显示
}
}
var ni=document.getElementById（“numin”）；
ni.addEventListener（“键控”，格式编号）
我尝试了这个解决方案，效果很好。在脚本标记中导入下面的行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

请注意，该数字不再是有效的JavaScript数字。我们的解决方案将在短时间内获取所有数字，并对其进行格式化，单击按钮后也会进行格式化。但我在看按键，按下一个键就会继续格式化。缺少在正则表达式中添加小数。我可以在可能的情况下进行调查。非常感谢您的支持。我正在浏览您的代码，想知道下面的代码片段将在什么时候被调用？因为在按键时，您只是调用isNumberKey函数，并以返回true/false结束。我调试并发现var textInput=。。。。从来没有人打过电话。我错过什么了吗？var textInput=document.getElementById（'txtChar'）；您可以将
var textInput…
放在
keyup
事件侦听器中，但它是在代码段的上下文中初始化的。您可以将它放在代码中最有意义的地方。按键时调用的功能检查有效按键，如果按键无效（例如非数字、非删除），则取消事件。否则它将返回true，并通过
keypress
和后续的
keyup
事件进行处理，从而有效地格式化输入。很高兴您修复了它，但除非您在代码中的其他位置使用掩蔽，否则仅为此功能加载一个非常大的代码不是一件过分的事吗？非常感谢您的回答。我看到var ni=document.getElementById（“numin”）；下面的线是函数外部的位置。那么你能告诉我这两行应该放在哪里吗？@Soham
formatNumber
函数实际上是我们作为分配给
ni
变量的输入元素的
keyup
事件的事件侦听器传递的回调。换句话说，上面的代码基本上只有两行，从
var ni=document.getElementById（“numin”）开始行，并在第二个
ni.addEventListener（“keyup”，formatNumber）上结束行。上面的函数定义将用作事件侦听器中的回调。
.reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

$('#incomePerPeriod').mask("#,##0.00", {reverse: true});