Input type=[number] converts float to int on display

Question

I want to display a value of lets say 100.00 in a number input. This can be user entered and works with currency so it is important that it shows.

However when programatically setting the value to 100.00 it resets the displayed variable to 100.

However if you write 100.00 then it works fine. Problem is that there is validation on this input and the value gets refreshed by the javascript putting it back to 100.

Edit: Seems to only be affecting Firefox. I have tried adding the value as

input.value = 100.00

input.value = parseFloat(100.00)

input.value = parseFloat(100.00).toFixed(2).

 document.getElementById('test_input').value = 100.00; 

 <input id="test_input" type="number" step="0.01"> 

And JSFiddle https://jsfiddle.net/3qnL07yu/

Answer 1

You can update the input value like this:

document.getElementById('test_input').value = "100.00";

Here is the updated code: https://jsfiddle.net/zun0aptf/4/

Answer 2

Possible Ways: you could set your values like this

 <input id="test_input" type="number" step="0.01" value="100.00">

Or

 document.getElementById('test_input').value = "100.00";

Answer 3

Change type="number" to type="text" and put validation for number.

 <input id="test_input" type="text" step="0.01">

Updated code : https://jsfiddle.net/8c6n012f/1/