Is there a way to stop Mobile Safari inserting commas into number fields on HTML forms?

Question

I've got a site that contains a form to allow users to enter credit card details. The fields for the card number, issue number, CVC number and the amount they wish to deposit use an input box in an HTML form with the type "number".

The updated Mobile Safari that comes with iOS 5 automatically inserts commas into numbers in "number" input fields. This not only looks stupid in a CC number, but it breaks my validation. Is there a way to stop this?

The only purpose of using "number" as opposed to "text" is to make iOS and Android bring up a numbers-only soft keyboard rather than the full keyboard.

I've tried using a "text" type input with a pattern set to "[0-9]*". This brings up the numbers keyboard on iOS but not on Android. It also doesn't allow the number to be entered with a decimal point.

I'd be very greatful for any suggestions :)

Thanks

Answer 1

I changed mine from "number" to "tel" and I've not seen the issue occur anymore.

Answer 2

You're close - all you need to do is set the pattern to "[0-9]*" and keep the type as "number".

Answer 3

I'm having the same problem. I think it has to do with the region format in your settings. You can set type to "text":

type=text pattern="[0-9]{1,4}(\.[0-9]{2})?"

for a value between 0 and 9999.99. This solution doesn't trigger the number keyboard on iOS 5, though. Or keep the regional settings overwrite (dot/comma) and set:

type=number step="0.01" max="9999.99"

for decimal values between 0 and 9999.99. Also failure to validate or empty fields with attribute "required" are not preventing form from submitting in Safari 5.1 (OS X and iOS).