Входное значение отформатировано с десятичными знаками

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