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

Question

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:

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

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?

<input type="number" step="0.00000001">

Pebrook

Worth to mention that a number will not always be displayed in scientific notation. This answer explains when this will happen: https://mcmap.net/q/82450/-how-small-can-a-javascript-number-be-without-displaying-in-scientific-notation – Barrier

Answer 1

<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!

Gravimetric

you can pass the specific input element with oninput=precise(this), then doing function precise(el) { el.value = Number(el.value).toFixed(8); } – Aultman

Answer 2

Here is a variation based on StardustGogeta's answer:

<input oninput="this.value=Number(this.value).toFixed(this.step.split('.')[1].length)" type=number step="0.00000001">

Override

When you bind to oninput it works when you click the arrows next to the input field, but it doesn't let you type. If you replace oninput with onclick it lets you type and only modifies the content if you use the arrows. – Crunch