本文介绍如何使用 jQuery 为多个带有 currency 类的输入框绑定实时事件，自动提取数字、格式化为印尼卢比（IDR）并回填到对应输入框，确保每个输入框独立响应且不互相干扰。
本文介绍如何使用 jquery 为多个带有 `currency` 类的输入框绑定实时事件，自动提取数字、格式化为印尼卢比（idr）并回填到对应输入框，确保每个输入框独立响应且不互相干扰。
在表单开发中，常需对多个金额输入框统一进行本地化货币格式化（如 IDR 1.000.000）。若所有输入框共享 currency 类（如 ），关键挑战在于：如何精准定位当前正在编辑的输入框，并仅对其值做处理？ 答案是利用事件处理器中的 this 上下文——它始终指向触发事件的具体 DOM 元素，再结合 jQuery 的 $(this) 即可实现“按需操作”。
以下是完整、健壮的实现方案：
function formatRupiah(nominal) {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
}).format(nominal);
}
$('.currency').on('input', function() {
// 1. 清洗输入：移除非数字字符（保留小数点用于兼容浮点输入）
let raw = this.value.replace(/[^\d.]/g, '');
// 2. 提取有效数字（支持带小数点的输入，如用户输入 "123.45"）
let numericValue = parseFloat(raw);
// 3. 验证并格式化
if (!isNaN(numericValue) && isFinite(numericValue)) {
// 注意：Intl.NumberFormat 会自动四舍五入，确保数值合理
const formatted = formatRupiah(numericValue);
$(this).val(formatted);
} else {
// 输入无效时清空（避免残留符号如 "Rp " 或 "IDR"）
$(this).val('');
}
});✅ 推荐使用 'input' 事件而非 'keyup'：
- input 覆盖粘贴（Ctrl+V）、拖拽、语音输入等所有值变更场景；
- keyup 无法捕获鼠标右键粘贴或程序化赋值，易导致格式不同步。
⚠️ 重要注意事项：
- 防循环触发：$(this).val(...) 会再次触发 input 事件。但因新值已是格式化字符串（含字母和符号），parseFloat() 将返回 NaN，从而终止后续处理，天然避免死循环；
- 光标位置问题：原生 val() 设置会重置光标至末尾。如需更精细控制（如保持编辑位置），需额外封装光标管理逻辑（本文聚焦核心功能，暂不展开）；
- 空值与负数处理：当前逻辑默认清空非法输入；如需支持负数，正则可改为 /[^\d.-]/g，并校验 numericValue
-
依赖 jQuery：请确保页面已引入 jQuery（如 CDN）：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
? 扩展建议：
- 若项目已用 Vue/React，推荐改用响应式绑定 + 自定义指令/自定义 Hook，避免直接操作 DOM；
- 对纯 JavaScript 项目，可用 document.querySelectorAll('.currency') 配合 forEach 和 addEventListener 替代 jQuery，提升轻量化。
该方案简洁、可靠，适用于任意数量的 .currency 输入框，真正实现“一处编写，多处生效”的专业级交互体验。
