用js实现input表单输入金额自动加上千分位,并且只在前端显示千分符千分符不保存进数据库
时间: 2024-03-27 20:41:29 浏览: 66
好的,您可以使用下面的代码来实现:
```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;
});
// 在表单提交前,去除金额中的千分位分隔符
const form = document.querySelector('#my-form');
form.addEventListener('submit', function (event) {
const input = document.querySelector('#amount-input');
const amount = input.value.replace(/,/g, '');
input.value = amount;
});
```
在上面的代码中,我们首先监听了输入框的 `input` 事件,实现了输入金额时自动加上千分位分隔符的功能。然后,我们又监听了表单的 `submit` 事件,在表单提交前,去除了金额中的千分位分隔符,保证了千分位分隔符不会保存进数据库。
注意,由于我们只是在前端显示千分位分隔符,而不是将其保存进数据库,因此在后端处理表单数据时,也需要去除金额中的千分位分隔符。
阅读全文