4

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?

sparkyspider
  • 11,590
  • 8
  • 73
  • 113

3 Answers3

0

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

DiskJunky
  • 4,320
  • 3
  • 30
  • 60
  • 1
    @MarkvanWyk hmm, apologies I thought I remembered coming across this but not as well as I thought I did apparently. I did manage to find this (setting language); http://nimbupani.com/declaring-languages-in-html-5.html and this (input patterns - near the bottom); http://www.adobe.com/devnet/dreamweaver/articles/html5-forms-pt2.html but I don't think it answers your question - sorry :-( – DiskJunky Feb 18 '13 at 21:33
  • I'm going to try and set the Apache settings to return locale information in the header. Thanks for the idea! – sparkyspider Feb 18 '13 at 21:49
0

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!

sparkyspider
  • 11,590
  • 8
  • 73
  • 113
  • The pattern attribute only seems to be considered on form submission and not directly. I also would like to allow scientific notation like "1.5e-4". Therefore, "e,E,+,-" should be valid characters. – Stefan Jul 10 '19 at 12:02
0

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">
Peter
  • 5,930
  • 4
  • 26
  • 29