Блог

Привет, хорошие люди на 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"
                  />  

Итак, результаты, которые я ищу, — это чтобы входные данные выглядели так, когда пользователь вводит это:

Вместо этого:

Надеюсь, это было понятно. Заранее спасибо за любую помощь.

Вы не обновляете поле ввода форматированным текстом:

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