Response title
This is preview!
Move this topic
Bad to use input type="tel" for numeric?
in jQuery Mobile
•
6 months ago
Hey Guys.
Would it be bad practice to use the telephone input type for fields like credit card numbers to have the keypad popped on IOS devices? I realize they could still enter dashes and other special characters. It's just a much better experience to get GIANT numbers to type in as you're tying numbers.
Anyone think that's a bad idea?
Could this cause a problem on degraded devices or does it just fall back to text?
Thanks,
Steven
Would it be bad practice to use the telephone input type for fields like credit card numbers to have the keypad popped on IOS devices? I realize they could still enter dashes and other special characters. It's just a much better experience to get GIANT numbers to type in as you're tying numbers.
Anyone think that's a bad idea?
Could this cause a problem on degraded devices or does it just fall back to text?
Thanks,
Steven
1
Replies(10)
Re: Bad to use input type="tel" for numeric?
6 months ago
You rely upon current realization of type=tel fields in most browsers. It may be that some browsers (will?) display contact manager instead of keypad, etc.
Leave a comment on Denis Ryabov's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Why don't you use the html5 <input type="number" /> element? If IOS is as clever as Android 
, it should then select the numbers keypad.
, it should then select the numbers keypad.Re: Bad to use input type="tel" for numeric?
6 months ago
I think it's related to this topic: https://forum.jquery.com/topic/numeric-keypad
Leave a comment on alano999's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Hey Guys.
input type="number" in IOS simply opens the keyboard with the numbers available. It'd be nice (as they've done with dates and months and such) if they'd instead open the numeric keypad since the goal is ONLY numbers.
If in the post Dryabov mentioned above, someone is saying that tel works better for numbers in Android, then I'm going with TEL since I know what it does in IOS.
Steven
input type="number" in IOS simply opens the keyboard with the numbers available. It'd be nice (as they've done with dates and months and such) if they'd instead open the numeric keypad since the goal is ONLY numbers.
If in the post Dryabov mentioned above, someone is saying that tel works better for numbers in Android, then I'm going with TEL since I know what it does in IOS.
Steven
Leave a comment on tateman66's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Just following up on this.
The problem with input type="number" and pattern="[0-9]*" is that after you fill out the field, it adds the thousands separators to the number. Good, for real numbers, bad for other things like credit card numbers.
So, this actually worked on IOS and it opens the keypad and doesn't let you type those extra telephone characters.
input type="tel" pattern="[0-9]*"
I wonder if it works on Android.
Anyone?
The problem with input type="number" and pattern="[0-9]*" is that after you fill out the field, it adds the thousands separators to the number. Good, for real numbers, bad for other things like credit card numbers.
So, this actually worked on IOS and it opens the keypad and doesn't let you type those extra telephone characters.
input type="tel" pattern="[0-9]*"
I wonder if it works on Android.
Anyone?
Leave a comment on tateman66's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
I've used this page... http://jsfiddle.net/alano/JufbQ/ to test using my Android browser.
First the good news... in Google Chrome and Android (2.3.5 Gingerbread) type=tel and type=number popup the numeric keypad. type=text causes the full alpha-numeric keyboard to popup even though the html5 spec suggests that on mobile devices only the numeric keypad should popup when the numeric pattern is supplied.
Am i missing something?... in both Chrome and Android I can enter any key. The pattern is ignored.
Cheers,
Alan
Leave a comment on alano999's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Does Android do what IOS does and put the thousands separators in there when you have both number and pattern after clicking done/dismissing the keypad?
I'm not as concerned about pattern for now as our solution disallows anything but numbers. Though, yes, I'm very ready for the full suite of regular expressions in the pattern field!
Steven
I'm not as concerned about pattern for now as our solution disallows anything but numbers. Though, yes, I'm very ready for the full suite of regular expressions in the pattern field!
Steven
Leave a comment on tateman66's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Android Gingerbread does NOT add thousands separators in type=tel,numeric
Re: Bad to use input type="tel" for numeric?
6 months ago
Thousands separator is not the only possible formatting of numbers, browsers can remove leading zeroes, it's unknown how "minus" character in the middle of text will be processed (if we talk about credit card number), etc. Actually, type=numeric should be used for numbers only and not for ids or similar fields, so it's reasonable to display "numerics" using locale settings.
As to credit card numbers, the correct way should be to use pattern attribute, but it seems that Android browser doesn't take it into account and displays full alphanumeric keypad. And type=tel is reasonable workaround until pattern-dependent keypads will be supported by most browsers. But it has wrong semantics too, and browsers could start to display contact manager for type=tel fields (let's patent this idea before Apple will do it 
).
).
Leave a comment on alano999's reply
Re: Bad to use input type="tel" for numeric?
6 months ago
Just in case anybody is interested...
| Android 2.3.5 Gingerbread | Google Chrome 24 | |
|---|---|---|
| tel | numeric, no seps | numeric, no seps |
| number | numeric, no seps | numeric, no seps |
| text (pattern [0-9]*) | alpha, no seps | alpha, no seps |
| number (spin disabled) | numeric, no seps | numeric, no seps |
Alan
Leave a comment on alano999's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to tateman66's question
Statistics
- 10 Replies
- 925 Views
- 4 Followers
