用js实现input表单输入金额自动加上千分位
时间: 2024-03-27 19:41:29 浏览: 132
vue element-ui实现input输入框金额数字添加千分位
5星 · 资源好评率100%
好的,我可以帮您实现这个功能。您可以使用下面的代码来实现:
```javascript
// 获取输入框元素
const input = document.querySelector('#amount-input');
// 监听输入框的输入变化
input.addEventListener('input', function (event) {
// 获取用户输入的金额
let amount = event.target.value;
// 去除金额中的千分位分隔符
amount = amount.replace(/,/g, '');
// 将金额转换为数字类型
amount = parseFloat(amount);
// 如果输入的不是有效的数字,就退出函数
if (isNaN(amount)) {
return;
}
// 将金额格式化为带千分位分隔符的字符串
amount = amount.toLocaleString('en-US');
// 更新输入框的值
event.target.value = amount;
});
```
在上面的代码中,我们首先获取了输入框的元素,并监听了它的 `input` 事件。每当用户在输入框中输入金额时,我们就获取它的值,去除其中的千分位分隔符,将其转换为数字类型,然后使用 `toLocaleString` 方法将其格式化为带千分位分隔符的字符串,最后更新输入框的值。
阅读全文