CODEWITHSUNDEEP
htmlgoogle-chromenumberslocaledecimal-point
sparkyspider
sparkyspider

Reputation: 13519

How do I set Chrome to use a period as a decimal instead of a comma?

The following HTML5 code works. It allows a user to capture decimals using the HTML5 type="number" input type. This is made possible by the step attribute:

<input value="" name="turnover" id="turnover" placeholder="0" type="number" step="0.01">

The problem is that in South Africa, we use a period (.) as a decimal and not a comma (,). Unfortunately, Chrome is not allowing the use of a period and forces the user to use a comma. Apparently some other browsers use whatever decimal separator you use in the step attribute. Seems not Chrome.

Any ideas how to resolve this issue?

Upvotes: 4

Views: 9522

Answers (3)

Peter
Peter

Reputation: 6669

You have to specify the lang attribute of that input element to that of a country where periods denote decimals instead of comma, eg. english (en)

<input type="number" step="0.01" min="0" lang="en">

Upvotes: 2

sparkyspider
sparkyspider

Reputation: 13519

This is the closest solution I could come up which achieves the same effect. It uses the text attribute with a regular expression via the pattern attribute, instead of the HTML5 number attribute.

For currency (or 2 decimal places):

<input type="text" value="0" name="turnover" placeholder="0" pattern="\d+(\.\d{2})?"/>

For scientific (or 6 decimal places)

<input type="text" value="0" name="turnover" placeholder="0" pattern="\d+(\.\d{6})?"/>

For any decimal places

<input type="text" value="0" name="turnover" placeholder="0" pattern="\d+(\.\d+)?"/>

Hope this helps. If you have a better solution, please post!

Upvotes: 0

DiskJunky
DiskJunky

Reputation: 4971

have you tried setting the culture code of the page? Assuming your site serves mainly South African visitors...?

Upvotes: 0

Related Questions