为了账号安全,请及时绑定邮箱和手机立即绑定

使用 Javascript 的千位分隔符

使用 Javascript 的千位分隔符

冉冉说 2023-01-06 09:41:31

我使用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",它仍然不能放置点.字符。


如何解决这个问题?


查看完整描述

2 回答

?
哈士奇WWW

TA贡献1547条经验 获得超6个赞

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"/>

代码笔示例链接


查看完整回答
反对 回复 2023-01-06
?
一只萌萌小番薯

TA贡献1557条经验 获得超7个赞

考虑让浏览器使用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>


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信