React input type="number" for floats

Question

I want to have an input field of type="number". (So that on mobile phones the numeric keyboard will appear). The problem is, that all my values are in cents: 1EUR = 100 Cents and I want to display a comma as a decimal separator (German format), so onChange will multiply the value with 100, and when the value is rendered, it is devided by 100. But when I type "5." after typing the next number the "." will get lost. The same happens with a ",".

I couldn't find any component already implemented that does this by using input type="number" instead of type="text". So does anyone know such a library or a way to implement it, that does not include having two inputs, one for Cents and one for Euros?

Michael Michael · Accepted Answer · 2020-01-31T01:21:37

I think the number input type can handle the German comma system. So there might not be a need to manually change a 2,5 input into a 2.5. If you use this changeHandler on a number input

const changeHandler = e => {
    const val = e.target.value
    console.log(2 * val)
    setNumber(val)
  }

the val variable will be a usual float while you see a comma in the input.

React input type="number" for floats

1 Answers