18

I'm working on updating some form inputs to HTML5. I'm not interested in validating the data so much as having the numeric key pad on mobile devices. Input type 'tel' seems to do what I want, I get the numeric keypad on iPad/mobile. Input type 'number' will also give me the numeric keypad, but it also includes the spinner box which I don't want.

What I want to know is if it's safe to use type="tel" on a credit card input? Or should I use type="number" and try to disable the spinner somehow. I was reading that disabling the spinner can crash Chrome which isn't a trade off I'm willing to make.

Also, for the time being we're using the exact same site for mobile and non-mobile users.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Tom
  • 1,215
  • 3
  • 19
  • 30
  • I agree, it's semantically wrong to use `tel`, but unfortunately it does seem to be the most useful option. Something of a hostage to fortune though as you say. I asked a similar question recently: http://stackoverflow.com/questions/11219242/mobile-friendly-input-of-a-digits-spaces-string-a-credit-card-number before I found yours – John Carter Jul 18 '12 at 21:23

1 Answers1

7

I looked at this and just tried this on my Xoom with the built in browser and FF mobile (with a desktop UA string) and the tel input would seem to work just fine for this.

screeny

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
  • 5
    I guess what I'm afraid of is using 'tel' for a credit card number and having the form not submit because the browser doesn't think it's a valid telephone number (which it isn't obviously) – Tom Nov 23 '11 at 14:47
  • the browser did not attempt to do any validation on the number in either browser, or the desktop browsers – Eonasdan Nov 23 '11 at 16:14
  • @Eonasdan it didn't do at the time of testing. We'll never know what engineers at Google/Mozilla/Apple will come up with in the future – yas4891 Mar 15 '14 at 19:24
  • 7
    The HTML5 spec says the "tel" type won't validate or sanitize, aside from removing linebreaks: http://www.w3.org/TR/html5/forms.html#telephone-state-(type=tel) and payment processor Stripe uses it for card numbers. It's semantically dirty, but it doesn't look like it actually misbehaves. – twotwotwo Mar 22 '14 at 00:23
  • 2
    Ugh, but "User agents may change the spacing and, with care, the punctuation of values that the user enters" according to that same reference. Not so great. – twotwotwo Mar 22 '14 at 00:33
  • Internationally phone numbers are different lengths and formats, so when implemented type=tel still won't mess with field lengths. I'm thinking type=tel is the best solution even 2 years after OP. The same applies for bank routing number, account number, and social security numbers. I'm developing an 8-page rental application which has to be mobile-friendly :/ – MaKR May 16 '14 at 18:27
  • 3
    http://bradfrostweb.com/blog/mobile/better-numerical-inputs-for-mobile-forms/ but Android support looks sketchy, going to have to test.... – MaKR May 16 '14 at 18:35