如何在javascript中同时输入小数和带有千位分隔符的自动格式？

Question

我目前正在尝试创建一个输入，该输入将接受十进制数字，并同时使用千位分隔符自动格式化。

但是，我唯一可以自动格式化千位分隔符的方法是设置输入类型='文本'，我无法输入十进制数字。设置 input type='number' 允许我输入十进制数字，但它不会使用千位分隔符自动格式化

这是代码：

<input
  className="cal__section__form__container--input"
  placeholder={0}
  type="text"
  value={displayVal || ""}
  onChange={(e) => {
    const targ = e.target.value.replace(/\D/g, "") || 0;
    const displayVal = parseFloat(targ).toLocaleString(undefined, {
       maximumFractionDigits: 2,
      });
      console.log(displayVal);
      
   }}

/>

Answer 1

您永远不会更新您的 displayVal 状态。在 onChange 之外处理事件逻辑也是一种很好的做法。您的代码应如下所示：

const handleChange = (e) => {
    const value = e.target.value;
    const clean = value.replace(/,/g, "");
    const regex = /^[0-9]*\.?[0-9]*$/;

    if (value && clean.match(regex)) {
      if (!value.includes(".")) {
        const formatted = new Intl.NumberFormat().format(parseFloat(clean));
        setDisplayVal(formatted);
      } else {
        setDisplayVal(value);
      }
    } else {
      setDisplayVal("");
    }
};

<input
    className="cal__section__form__container--input"
    placeholder={0}
    type="text"
    value={displayVal}
    onChange={handleChange}
/>

Answer 2

export default function App() {
const [value, setValue] = useState(0);

const addCommas = (num) =>
    num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const removeNonNumeric = (num) => num.toString().replace(/[^0-9]/g, "");

const handleChange = (event) =>
    setValue(addCommas(removeNonNumeric(event.target.value)));

return (
    <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input type="text" value={value} onChange={handleChange} />
    </div>
);
}

有关工作示例，您可以查看沙盒链接：工作示例。