本文详解解决输入框实时格式化导致的光标错乱与数值截断问题，通过正则清洗非数字字符、改用 blur 事件替代 keyup，并提供健壮、用户体验友好的价格格式化方案。
在前端开发中，为价格输入框添加本地化格式（如法语使用空格分隔千位：1234567 → “1 234 567″）看似简单，但若在 keyup 事件中直接操作 input.value，极易引发严重交互问题——典型表现是：输入第 4 位数字后格式化成功，但继续输入时数值被意外截断（如输入 22222 只保留 2），光标跳转失序，甚至无法正常编辑中间位置。
根本原因在于：toLocaleString(‘fr-FR’) 插入的并非 ASCII 空格（U+0020），而是 Unicode 窄不换行空格（U+202F）。而 parseInt() 遇到首个非数字字符即停止解析，因此 “2 222″（含 U+202F）仅被解析为 2，后续逻辑完全失效。
✅ 正确做法是：用正则 D 全局清除所有非数字字符（包括 U+202F、逗号、点、字母等），再转换为整数：
const minPrice = document.getElementById('minPrice'); // ✅ 推荐：改用 blur 事件，避免干扰用户输入过程 minPrice.addEventListener('blur', function () { const raw = this.value.replace(/D/g, ''); // 安全清洗：保留纯数字 if (raw === '') { this.value = ''; return; } const num = parseInt(raw, 10); this.value = num.toLocaleString('fr-FR'); // 输出 "1 234 567" }); // ? 可选增强：同时支持 focus 时显示纯数字（提升可编辑性） minPrice.addEventListener('focus', function () { this.value = this.value.replace(/D/g, ''); });⚠️ 重要注意事项：
- 切勿在 keyup/input 中实时格式化：会导致光标重置、输入中断、删除键行为异常（尤其在中间编辑时）；
- 始终使用 replace(/D/g, ”) 而非 replaceAll(‘ ‘, ”)：D 匹配任意非数字字符（含 Unicode 空格、逗号、货币符号等），全面可靠；
- 指定 parseInt(str, 10) 的进制参数：避免八进制误解析（如 “08” 被当作非法八进制）；
- blur 是黄金时机：用户完成输入并移开焦点时格式化，既满足视觉需求，又不破坏输入流；
- 考虑空值与边界情况：如清空输入、输入非数字内容（如 “abc”）时需优雅处理。
? 进阶建议：如需更精细控制（如支持小数、实时反馈），推荐使用成熟的输入掩码库（如 IMask）或封装为自定义 Hook（react）/指令（vue），确保可访问性与国际化兼容性。