How to display decimal numbers with dot instead of comma in HTML Input tag type=“number” in Google Chrome

Question

I would like to know how can I use . to separate decimals in a HTML Input tag type="number" instead of , using Google Chrome (Version 89.0.4389.82) MacOs Catalina.

So far from what I've tried Firefox is the only browser which splits decimal numbers with .

Does anyone faced this issue? Any ideas how to fix it?

 <input type="number" value="1.5" step="0.1" min="0" />

Answer 1

Browser decimal separators differ according to the region. I think your issue is parsing the value for different regions(, and.)

Use valueAsNumber to extract the value

valueAsNumber (MDN Documentation)

double: Returns the value of the element, interpreted as one of the following, in order:

• A time value
• A number
• NaN if conversion is impossible

 window.addEventListener('DOMContentLoaded', (event) => { const ageInput = document.querySelector('#age'); console.log('Age:', ageInput.valueAsNumber); console.log('Type of Age:', typeof ageInput.valueAsNumber); });

 <input id="age" type="number" value="1.5" step="0.1" min="0" pattern="[0-9]+([,\.][0-9]+)?" />

Also added pattern for sake of completeness.