如何正确实现价格输入框的实时本地化格式化

本文详解解决价格输入框因千位分隔符导致的输入异常问题，指出窄不换行空格（u+202f）被 `parseint()` 截断的根本原因，并提供健壮、用户体验友好的格式化方案。

在构建价格输入功能时，直接监听 keyup 并对 值进行 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” 显示，又确保输入过程流畅可控——真正的“所见即所编”。