本文详解在文本输入框中实时格式化数字为本地化价格（如法语 `1 234`）时常见的光标错乱与解析失效问题，指出 `tolocalestring('fr-fr')` 插入的窄不换行空格（u+202f）导致 `parseint()` 截断，并提供健壮、用户体验友好的解决方案。
你遇到的“输入到第4位后回退成单数字”现象，根本原因在于：Number.prototype.toLocaleString('fr-FR') 生成的千位分隔符不是普通空格（U+0020），而是 Unicode 窄不换行空格（U+202F）——一种不可见、不可删除、且 parseInt() 无法跳过的非数字字符。
当用户输入 2222，代码执行：
"2222".toLocaleString('fr-FR') // → "2 222"（注意中间是 U+202F，非空格！）
parseInt("2 222") // → 2（parseInt 遇到首个非数字字符即停止解析）后续赋值 minPrice.value = "2"，直接覆盖全部输入，造成“吃掉”输入的诡异行为。
✅ 正确做法：用正则清除所有非数字字符
const minPrice = document.getElementById('minPrice');
// 使用 blur 事件替代 keyup，避免光标干扰
minPrice.addEventListener('blur', function () {
const raw = this.value;
// 一步清除所有非数字字符（包括 U+202F、逗号、点、字母等）
const digitsOnly = raw.replaceAll(/\D/g, '');
if (digitsOnly === '') {
this.value = '';
return;
}
const num = parseInt(digitsOnly, 10);
// 使用 toLocaleString 并确保解析安全
this.value = num.toLocaleString('fr-FR');
});⚠️ 关键注意事项
- 永远避免在 keyup/input 中修改 value：会导致光标跳至末尾，破坏用户在中间编辑（如修改 1 234 中的 3）的体验；
- blur 是更安全的时机：用户完成输入并移开焦点时格式化，符合直觉；
- /\D/g 比 ' ' 更可靠：\D 匹配任意非数字字符（含 Unicode 分隔符、符号、空格），彻底规避解析陷阱；
- 显式指定进制：parseInt(digitsOnly, 10) 防止八进制误解析（如 "08" 被转为 0）；
- 空值防护：digitsOnly === '' 时清空输入框，避免残留格式字符。
✅ 进阶建议（可选）
若需实时反馈（如边输边格式化），应使用 input 事件 + 光标位置保存/恢复技术（较复杂），或改用成熟的库如 cleave.js 或原生 <input type="number"> + CSS 样式辅助。但对价格范围筛选场景，blur 触发的清晰、无副作用格式化，通常是最佳平衡点。
记住：格式化是展示层职责，不应侵入用户输入流。保持输入框“原生感”，才是专业表单体验的基石。
