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

本文详解解决输入框实时格式化导致的光标错乱与数值截断问题，通过正则清洗非数字字符、改用 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;
  }
  con
st 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），确保可访问性与国际化兼容性。