Is there a way to suppress scientific notation for <input type="number">?

Claudiu picture Claudiu · Oct 14, 2015 · Viewed 8.4k times · Source

I'd like to input numbers with up to eight decimal points with an <input> element. However, if I have an <input type="number" step="0.00000001"> and use the up/down arrows on the input element (on Chrome; here's the jsfiddle), then I get scientific notation for the small numbers:

enter image description here

If I input, say, 5, and then hit the arrow key, then scientific notation is suppressed:

enter image description here

Is there any way to get the browser to display the 1e-8 as 0.000000001?

Also, is there any danger here that with sufficiently small numbers, I'll hit floating point rounding errors?

Answer

StardustGogeta picture StardustGogeta · Apr 20, 2016

<input oninput='precise(this)' type="number" step="0.00000001">

<script>
  function precise(elem) {
    elem.value = Number(elem.value).toFixed(8);
  }
</script>

You can change the toFixed parameter to the desired number of decimal digits as needed. I hope this helps!