Making an HTML number input display 2 decimal places using JavaScript

If you are using an HTML number input field (<input type="number">) to collect a dollar amount, here is a little trick to make it always display 2 decimal places using JavaScript.

Let us say you have the following HTML number <input> tag:

<input type="number" id="price" min="0" max="10" step="0.01" value="0.00">

Now we can attach a change event handler to listen for input changes:

const input = document.querySelector('#price')
input.addEventListener('change', e => {
  // TODO: Format Number Here
})

Inside the event handler method, we can use the toFixed() method to round the input string to a specified number of decimals:

input.addEventListener('change', e => {
  e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2)
})

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.