输入值格式为小数

Question

SO上的好人。

所以我在贷款计算器中有一个输入字段。在这里，我希望用户输入的输入值采用小数点格式（例如，在示例中更容易区分100000和1000000。）

如果我想使用JavaScript进行此“转换”，我在MDN文档中找到了有关名为“ Intl.NumberFormat”的对象构造器的一些信息

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

然后将以下代码粘贴到自己的JS文件中，如下所示：

// Changes Loan Amount input to decimal format

document.getElementById("amount").addEventListener("input", function(){
 new Intl.NumberFormat('en-CA', {style: "decimal"}).format(amount);
});

我的HTML看起来像这样：

<span class="input-group-text">$</span>
                  <input
                    type="text"
                    class="form-control"
                    id="amount"
                    placeholder="Loan Amount"
                  />

所以我要寻找的结果是使输入看起来像是用户输入时的样子：

代替此：

希望这很清楚。在此先感谢您的帮助。

Answer 1

您不使用格式文本更新输入字段：

document.getElementById("amount").addEventListener("input", function(){
    document.getElementById("amount").value = new Intl.NumberFormat('en-CA', {style: "decimal"}).format(document.getElementById("amount").value);
});

但是，我认为您希望从每次输入迭代中去除非数字字符，因此这可能更接近您想要的内容：

document.getElementById("amount").addEventListener("input", function(){
    document.getElementById("amount").value = new Intl.NumberFormat('en-CA', {style: "decimal"}).format(document.getElementById("amount").value.match(/\d+/g).join(''));
});