本文详解解决价格输入框因千位分隔符导致的输入异常问题，指出窄不换行空格（u+202f）被 `parseint()` 截断的根本原因，并提供健壮、用户体验友好的格式化方案。
在构建价格输入功能时，直接监听 keyup 并对 <input> 值进行 toLocaleString('fr-FR') 格式化看似简洁，实则埋下严重交互隐患。你遇到的“输入到第4位后回退为单数字”现象，根源并非逻辑错误，而是法语本地化千位分隔符使用的是 Unicode U+202F 窄不换行空格（Narrow No-Break Space），而非普通 ASCII 空格 ' '。parseInt("2 222")（注意中间是 U+202F）会在首个非数字字符（即该 Unicode 空格）处停止解析，仅返回 2——这正是后续输入被“吃掉”的元凶。
✅ 正确做法：用正则 \D（匹配所有非数字字符）彻底清除干扰符号，而非仅替换空格：
const minPrice = document.getElementById('minPrice');
minPrice.addEventListener('input', function () {
// 1. 提取纯数字字符串（移除所有非数字字符，包括 U+202F、逗号、点等）
const rawDigits = this.value.replace(/\D/g, '');
// 2. 转为整数；若为空则设为 0，避免 NaN
const num = rawDigits ? parseInt(rawDigits, 10) : 0;
// 3. 格式化为法语本地化字符串（自动使用窄不换行空格分隔）
const formatted = num.toLocaleString('fr-FR');
// 4. 安全赋值（避免光标跳变）
this.value = formatted;
});⚠️ 但更关键的是交互设计原则：切勿在 input 或 keyup 中实时修改聚焦中的输入框值。原因如下：
- 浏览器无法智能维护光标位置，用户在中间编辑（如 "12|345" → 改为 "12|045"）会导致光标重置到末尾；
- 连续输入易触发格式化-重置循环，造成卡顿与失控；
- 移动端软键盘行为更不可预测。
? 推荐生产级方案：分离输入与展示，采用 blur + focus 组合策略
const minPrice = document.getElementById('minPrice');
// 失去焦点时格式化（用户完成输入）
minPrice.addEventListener('blur', function () {
const raw = this.value.replace(/\D/g, '');
const num = raw ? parseInt(raw, 10) : 0;
this.value = num.toLocaleString('fr-FR');
});
// 获得焦点时还原为纯数字（便于用户编辑）
minPrice.addEventListener('focus', function () {
this.value = this.value.replace(/\D/g, '');
});? 进阶提示：
- 使用 input 事件替代 keyup，它能捕获粘贴、拖放等所有输入方式；
- 对空值、负数、超大数值需额外校验（如 Number.MAX_SAFE_INTEGER）；
- 若需支持小数，改用 parseFloat 并配合 toFixed()，但注意 toLocaleString 对小数的支持需显式指定 minimumFractionDigits；
- 后端仍需独立校验，前端格式化仅为体验优化，不可替代服务端数据清洗。
遵循此方案，既能保证法语用户看到符合习惯的 "1 234,56" 显示，又确保输入过程流畅可控——真正的“所见即所编”。
