如何正确实现价格输入框的本地化格式化（如法语千位分隔）

本文详解为何在实时输入时调用 `tolocalestring('fr-fr')` 会导致数字被截断（如输入“22222”变成“2”），根本原因是法语格式插入的窄不换行空格（u+202f）被 `parseint()` 提前终止解析；并提供健壮、用户体验友好的解决方案。

在前端开发中，为价格输入框实时添加本地化格式（例如法语区使用空格作为千位分隔符：123456 → "123 456"）看似简单，但若直接监听 keyup 并粗暴重写 input.value，极易引发输入异常——正如问题中描述：输入第五位数字时，值突然“塌缩”为个位数。其根源并非逻辑错误，而是对 toLocaleString() 输出字符特性的忽视。

? 问题本质：看不见的 Unicode 空格破坏了数字解析

法语（fr-FR）调用 toLocaleString() 时，千位分隔符并非 ASCII 空格（

U+0020），而是 Unicode 窄不换行空格（U+202F），它在视觉上与普通空格几乎一致，但 parseInt() 在解析字符串时，一旦遇到任何非数字字符（包括 U+202F），立即停止解析并返回已成功读取的部分。因此：

parseInt("2 222"); // → 2 （U+202F 后的所有内容被忽略！）

原代码中 a.replaceAll(' ','') 完全无效——它只替换了普通空格，却对真正的分隔符 U+202F 视而不见。

✅ 正确方案：清洗非数字字符 + 避免实时干扰

应使用正则表达式 \D（匹配所有非数字字符）彻底清除干扰项，并强烈建议放弃 keyup 实时格式化——它会破坏光标位置、导致编辑中断、引发输入错乱（尤其在中间修改时）。更合理的方式是：

• 输入时仅允许数字（可选）：通过 input 事件限制输入内容；
• 失焦时格式化（推荐）：在 blur 事件中统一处理，兼顾体验与准确性。

以下是生产环境可用的优化实现：

const minPrice = document.getElementById('minPrice');

// 方案1：仅在失焦时格式化（推荐 ✅）
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'); // 输出 "123 456"
});

// 方案2（进阶）：输入时实时过滤，但不格式化（防误输）
minPrice.addEventListener('input', function (e) {
  // 仅保留数字，避免格式化干扰光标
  const cleaned = this.value.replace(/\D/g, '');
  if (cleaned !== this.value) {
    this.value = cleaned;
  }
});

⚠️ 关键注意事项

• 永远不要在 keyup/input 中直接设置 value 并调用 toLocaleString()：这会重置光标到末尾，用户无法在中间插入或删除数字。
• blur 是平衡点：用户完成输入后才格式化，既保证显示美观，又不干扰操作流。
• 服务端仍需校验：前端格式化仅为体验优化，后端必须独立解析原始数字（如提取 /\d+/），不可依赖已格式化的字符串。
• 考虑无障碍（a11y）：添加 aria-label 或 aria-describedby 说明格式规则，例如：“请输入数字，将自动格式化为法语样式（例：123 456）”。

通过理解 Unicode 分隔符特性、选用恰当的事件时机与健壮的字符清洗策略，即可实现专业、稳定、符合用户直觉的价格输入体验。