用小数格式化的输入值

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(''));
});