How to use toFixed properly while entering input value

Question

I'd like to keep the two digits after a number ie 2.89 or 2.00. Google brought me to this answer to use .toFixed(2).

While that works great, it does not work well when entered input values:

const [ value, setValue] = useState()

const onChange = (value) => {
  const float = parseFloat(value)
  setValue(float.toFixed(2))
}


<input
  type="number"
  value={value}
  onChange={({ target }) => onChange(target.value)}
/>

If I should type, say, "300", the input value stops at "3.00". I have to move the cursor before "3" to type "300". What's the best way to do this?

I expect the value to always show .33, .00 etc while having the ability to "free type". As I type this question, I feel I need to use onBlur to convert the value to .toFixed and not while typing?

Yep, you are on right track, use `onBlur`. – Hassan Imam Apr 12 '20 at 17:56 — Hassan Imam, Apr 12 '20 at 17:56

score 2 · Accepted Answer · answered Apr 12 '20 at 18:05

You can use onBlur and add some checks in while setting value

export default function App() {
  const [value, setValue] = useState('');
  const onChange = (v) => {
    if (!Number.isNaN(v)) {
      setValue(v);
    }
  };

  return (
    <div className="App">
      <input
        type="number"
        value={value}
        step="1"
        onChange={({ target }) => onChange(target.value)}
        onBlur={e => setValue(Number(value).toFixed(2))}
      />
    </div>
  );
}

Yes, I though there would be a much cleaner way to do this. But hey, it works. Thanks. — Sylar, Apr 12 '20 at 18:07

score 1 · Answer 2 · answered Apr 12 '20 at 18:07

I would not try to set the decimal places on the number on the onChange but make an onBlur handler.

const TodoApp = ( ) => {
  const [ value, setValue] = React.useState('');

  const onBlur = (e) => {
    const float = parseFloat(e.target.value)
    setValue(float.toFixed(2))
  }



  return (
    <input
      type="number"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={onBlur}
    />
  );
}

score 0 · Answer 3 · answered Apr 12 '20 at 17:59

0

Hi dude read this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

And try using step propety, i recommended

<input
  type="number"
  value={value}
  step="1"
  onChange={({ target }) => onChange(target.value)}
/>

and try if it works

answered Apr 12 '20 at 17:59

vfbraton

83
1
6

Thanks for your answer but the correct way was to use `onBlur()`. Try it out ;) – Sylar Apr 12 '20 at 18:12

score 0 · Answer 4 · answered Apr 12 '20 at 18:16

0

export const InputElement = () =>  {
  const [value, setValue] = React.useState(0);
  const fixInt = (v) => {
    setValue(Number(v).toFixed(2));
  };

  return (
    <div className="App">
      <input
        type="number"
        value={value}
        step="1"
        onChange={({ target }) => fixInt(target.value)}
      />
    </div>
  );
}

answered Apr 12 '20 at 18:16

Hassan Raza

61
4

Can you add some description or comment how this code works and why it fixes the problem? It will help further StackOverflow generations to understand the context without decrypting the code. – Dawid Pura Apr 12 '20 at 19:39

How to use toFixed properly while entering input value

4 Answers4