如何用JavaScript实现输入框支持小数输入同时自动格式化千位分隔符

AI 小北

2026-9-29

修复方案

问题根源

type="number"类型的输入框原生不支持value携带千位分隔符的逗号字符，格式化后的值无法正常回显，因此只能使用type="text"实现需求
原有代码中replace(/\D/g, "")的正则会匹配所有非数字字符，小数点也会被直接过滤，导致无法输入小数

修正后代码

<input
  className="cal__section__form__container--input"
  placeholder={0}
  type="text"
  value={displayVal || ""}
  onChange={(e) => {
    // 仅保留数字和小数点，过滤其他非法字符
    let rawVal = e.target.value.replace(/[^\d.]/g, "");
    // 处理多个小数点的情况，只保留第一个
    const dotPos = rawVal.indexOf(".");
    if (dotPos !== -1) {
      // 小数部分最多保留2位，符合你原本的精度要求
      rawVal = rawVal.slice(0, dotPos + 1) + rawVal.slice(dotPos + 1, dotPos + 3);
    }

    // 空输入处理
    if (!rawVal) {
      // 替换为你实际的状态更新方法
      setDisplayVal("");
      // 建议额外维护原始数值状态，供后续业务计算使用
      setRealValue(0);
      return;
    }

    // 拆分整数、小数部分分别处理，避免小数部分被加千位分隔符
    const [integerPart, decimalPart = ""] = rawVal.split(".");
    const formattedInteger = parseInt(integerPart).toLocaleString();
    const newDisplayVal = decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;
    
    // 更新显示状态
    setDisplayVal(newDisplayVal);
    // 更新原始数值状态
    setRealValue(parseFloat(rawVal));
  }}
/>