How to input decimal numbers and auto format with thousand separators at the same time in javascript?

user_14653996 0
Viewed 958

I am currently trying to make an input that will take in decimal numbers and will auto format with thousand separators at the same time.

However, the only I can do auto format thousand separator is to set input type='text', which I cannot enter decimal numbers. Where as setting input type='number' allows me to input decimal number but it won't auto format with thousand separators

Here is the code:

<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);
      
   }}

/>

reactjs type-conversion input javascript
1 Answers

You're never updating your displayVal state. It's also good practice to handle your event logic outside of onChange. Here's how your code should look:

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}
/>
user_85946350
Related