使用 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) {&nbsp; let nums = input.value.replace(/,/g, '');&nbsp; if (!nums || nums.endsWith('.')) return;&nbsp; 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) => {&nbsp; $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) => {&nbsp; $output.innerText = Intl.NumberFormat(undefined, {&nbsp; &nbsp; maximumFractionDigits: 2&nbsp; }).format(evt.target.value);})<input><div></div>