使用 Javascript 的千位分隔符

Question

我使用oninput属性使input字段在插入时自动生成千位分隔符，并且有效。但我想要实现的是，它也允许放置点.字符，因为我想获得两位小数，到目前为止这是我的代码不起作用：function separator(input) {   let nums = input.value.replace(/,/g, '');  if(!nums)return;  input.value = parseFloat(nums).toLocaleString(); }function addition() {  var number1 = document.getElementById('number1').value;  var number2 = document.getElementById('number2').value;  number1 = number1.replace(/[,]+/g, '');  number2 = number2.replace(/[,]+/g, '');    if (number1 == "")    number1 = 0;  if (number2 == "")    number2 = 0;      var result = parseFloat(number1) + parseFloat(number2);  result = result.toFixed(2);  if (!isNaN(result)) {      document.getElementById('total').value = result;  }  document.getElementById('total').onchange();}<table>  <tr>    <td><input onkeyup="addition()" oninput="separator(this)" type="text" id="number1" placeholder="123,456.16"></td>    <td>+</td>    <td><input onkeyup="addition()" oninput="separator(this)" type="text" id="number2" placeholder="123,456.16"></td>    <td>=</td>    <td><input onchange="separator(this);" type="text" name="total" id="total" placeholder="total" readonly></td>  </tr></table>即使我已经设置了input带有属性的字段type="text"，它仍然不能放置点.字符。如何解决这个问题？

Answer 1

function seprator(input) {

  let nums = input.value.replace(/,/g, '');

  if (!nums || nums.endsWith('.')) return;

  input.value = parseFloat(nums).toLocaleString();

}

<input type="text" id="inputSep" oninput="seprator(this)" placeholder="123,456,789"/>

代码笔示例链接

Answer 2

考虑让浏览器使用Intl.NumberFormat为您完成工作

const $input = document.querySelector('input');

const $output = document.querySelector('div');

$input.addEventListener('input', (evt) => {

  $output.innerText = Intl.NumberFormat().format(evt.target.value);

});

<input>

<div></div>

您可以自定义有关输出数字格式的许多内容，在您的情况下，您可能希望调整minimumFractionDigits或maximumFractionDigits设置：

const $input = document.querySelector('input');

const $output = document.querySelector('div');

$input.addEventListener('input', (evt) => {

  $output.innerText = Intl.NumberFormat(undefined, {

    maximumFractionDigits: 2

  }).format(evt.target.value);

})

<input>

<div></div>