在涉及金额录入的网页表单中，实时货币格式化能够让用户更直观地确认输入数值。通过jQuery监听输入事件，并在回调函数中使用this关键字获取当前正在输入的DOM元素，就能针对单个字段做格式化处理，而不影响页面上其他输入框。
实现思路
核心逻辑是：当用户在文本框中输入内容时，先去掉非数字字符，再按千位分隔符规则重组字符串，最后写回原输入框。由于每个输入框触发事件时this都指向自己，所以可以用统一的函数处理多个字段。
基础HTML结构
<label>金额：</label> <input type="text" class="currency-input" placeholder="请输入金额" /> <label>手续费：</label> <input type="text" class="currency-input" placeholder="请输入手续费" />
jQuery实时格式化代码
下面代码绑定input事件，在事件函数内通过this获取当前输入框，并完成格式化。
// 绑定所有货币输入框的input事件
$('.currency-input').on('input', function() {
// this指向当前触发事件的input元素
var rawValue = $(this).val();
// 去除所有非数字和小数点字符
var numberStr = rawValue.replace(/[^d.]/g, '');
// 分割整数与小数部分
var parts = numberStr.split('.');
var intPart = parts[0];
var decPart = parts.length > 1 ? '.' + parts[1].slice(0, 2) : '';
// 整数部加千位分隔符
intPart = intPart.replace(/B(?=(d{3})+(?!d))/g, ',');
// 写回格式化后的值
$(this).val(intPart + decPart);
});
关键点说明
- 使用
this关键字可确保操作对象始终是用户正在输入的那个字段。 - 正则中的
B(?=(d{3})+(?!d))用于在整数部分插入逗号。 - 为避免输入光标跳动，复杂场景可记录光标位置，但基础格式化已能满足多数需求。
注意事项
如果后端接口要求纯数字，提交前需用replace(/,/g, '')去掉逗号。另外，在移动端输入法组合输入时可能触发多次事件，可加简单防抖提升体验。
实时格式化应在客户端提升可读性，真实数据存储仍以数字类型为准。
提交前清理示例
// 获取纯数字金额
function getPureNumber(inputElem) {
return $(inputElem).val().replace(/,/g, '');
}
// 假设提交时调用
$('#submit-btn').on('click', function() {
var amount = getPureNumber($('.currency-input').eq(0));
console.log('提交金额:', amount);
});
通过上述方式，利用jQuery和this关键字即可低成本的为多个输入字段接入实时货币格式化能力。