Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

<input type="number" step="0.00000001">
like image 208
Claudiu Avatar asked Oct 14 '15 18:10

Claudiu


People also ask

How do you get rid of scientific notation?

Express each number in scientific notation. To change scientific notation to standard notation, we reverse the process, moving the decimal point to the right. Add zeros to the end of the number being converted, if necessary, to produce a number of the proper magnitude. Lastly, we drop 10 and its power.


2 Answers

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

like image 96
StardustGogeta Avatar answered Sep 30 '22 04:09

StardustGogeta


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">
like image 5
raugfer Avatar answered Sep 30 '22 03:09

raugfer