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">
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.
<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!
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With