Javascript 当用户键入时，将输入值转换为货币格式

我无法将输入值转换为货币格式。我想在用户键入数字（5000.00；125000.00）时自动添加千和十进制分隔符

这是我的密码：

$('input.CurrencyInput').on('blur, focus, keyup',
    function() {
        $(this).val().toLocaleString('en-US', {
            style: 'decimal',
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        });
    });

---

您的代码有几个问题：

将多个事件处理程序绑定到输入框时使用逗号

在对其应用

toLocaleString

之前，您不会将收到的值转换为数字

转换后，您不会再次设置文本框的值

纠正这些，这里是一个工作演示。为了简单起见，我删除了除

blur

之外的其他事件处理程序，因为

keyup

会导致问题

$（'input.CurrencyInput'）。在（'blur'，function（）上{
常量值=此.value.replace（/，/g'，）；
this.value=parseFloat（value）.toLocaleString（'en-US'{
样式：“十进制”，
最大分数位数：2，
最小分数位数：2
});
});

将值解析为特定区域设置货币
下面的函数将尝试将任何乱七八糟的输入值解析为特定货币。

如果您不想强制用户以特定区域设置格式输入值，则此选项非常有用

注意事项：

由于输入可以像
1,2.3.45,5那样胡言乱语，并且仍然给出有效输出（如USD:
“12345.50”
），因此有一个小但用户友好的警告：

// Example: conversion to HRK (Format: n.nnn,nn)
INPUT: "0.575"   OUTPUT: "0,58"      // smart guessed: decimals
INPUT: "1.575"   OUTPUT: "1.575,00"  // smart guessed: separator

例如：

/**
*将值解析为货币
*@param{number | string}输入
*@param{string}locale-所需的区域设置，即：“en-US”“hr-hr”
*@param{string}currency-使用“USD”“EUR”“HRK”的货币
*@return{object}
*/
const parse=（输入，locale=“en-US”，currency=“USD”）=>{
设fmt=String（输入）
.更换（/（？1）{
如果（+pts[0]==0）fmt=pts.join（“.”）；
else如果（pts[1].length==3）fmt=pts.join（“”）；
}
常数编号=编号（fmt）；
常量isValid=isFinite（数字）；
const string=number.toFixed（2）；
const intlNFOpts=新的Intl.NumberFormat（区域设置{
风格：“货币”，
货币:货币,，
}).resolvedOptions（）；
常量输出=number.toLocaleString（区域设置{
…国际足联，
样式：“十进制”，
});
返回{
输入，
是有效的，
一串
数字，
货币，
产出，
};
};

示例测试：

/**
*将值解析为货币
*@param{number | string}输入
*@param{string}locale-所需的区域设置，即：“en-US”“hr-hr”
*@param{string}currency-使用“USD”“EUR”“HRK”的货币
*@return{object}
*/
const parse=（输入，locale=“en-US”，currency=“USD”）=>{
设fmt=String（输入）
.更换（/（？1）{
如果（+pts[0]==0）fmt=pts.join（“.”）；
else如果（pts[1].length==3）fmt=pts.join（“”）；
}
常数编号=编号（fmt）；
常量isValid=isFinite（数字）；
const string=number.toFixed（2）；
const intlNFOpts=新的Intl.NumberFormat（区域设置{
风格：“货币”，
货币:货币,，
}).resolvedOptions（）；
常量输出=number.toLocaleString（区域设置{
…国际足联，
样式：“十进制”，
});
返回{
输入，
是有效的，
一串
数字，
货币，
产出，
};
};
//测试：
[
//有效值
“2e5”，
"1,2.3,10,6",
"0.575",
"1.575",
"2.30",
"1.000.00",
"1.000",
1000,
1.
".4",
"4.",
"0.25",
"0.076",
"1.076",
0.3478,
"0.05",
"123,123",
"3.000,333.444,009",
"123,123.80",
"23.123,80",
"23.123,8",
"23.4",
//无效值
无效的
楠,，
无穷
“a”，
].forEach（（val）=>{
常数p=parse（val，“hr”，“HRK”）；
log（`INP:${p.input}\t OUT:${p.output}`）；
})；
.as控制台包装{最小高度：100vh；}
.val（）
返回一个
字符串
，但
。toLocaleString
是一种
数字
方法。此外，可能存在重复，您没有在任何地方设置值。您正在获取当前值并试图对其进行操作，但没有对结果执行任何操作。您无法使用oninput或keyup，因为您不知道它们是什么e计划键入。键入时，我是否能够键入1123123.123并将其格式化为1123123.12，或者键入1123123.123（这是一个有效的浮点）并将其格式化为1123123.12？您可能想看看一些外部库/插件。我过去使用过，它运行良好。（单击演示按钮-此处有货币输入）你试过这个吗？@mplungjan--是的，你可以运行这个代码段。它正确地格式化了模糊上的数字。如果我输入
1123123.123
，我们可以等待OP的评论。如果这符合要求，那么就不必再进一步了。我认为这是一个很好的答案，只需让它重新输入即可。例如，键入
1000
，就可以给你
1000.00
。但是现在如果您更改小数点前的最后一个0，您将得到
1.00
，而不是像@TylerRoper所说的那样在重新解析之前去掉逗号。但是
。替换（/，/g，）
，因为none正则表达式只替换第一个
，
。）