HTML5 Input Types for Credit Card Numbers?

[StephBertha]

Hi there,

I just put in the ‘number’ type for an input field and on my iPad, it works – shows the number keypad. Great, but when I on a PC or Mac, it shows up and down arrows, like it’s a quantity box.

Huh. Am I missing something? What about just a regular ol’ number box?

[Paulie_D]

Hmmm.

To me a Credit Card Number isn’t actually a number at all…if you see what I mean.

It’s actually, the way I see it, a text string (or 4 text strings if you like).

You aren’t going to do any manipulation of the number so there really isn’t any need to treat it as one.

Anyway, here’s an article on HTML5 inputs…’number’ is about half way down.

http://html5doctor.com/html5-forms-input-types/

The article actually references an old video by Chris Coyier.

[Chris Coyier]

Definitely type=text with the pattern as @traq suggested. I’ve made this mistake before too. It can do awkward stuff like add commas into the number on blur in some browsers.

[colin-stannard]

For anyone who is still looking for an easy way to capture credit card numbers, I recommend looking at a project I’m part of – Card Js

[Author]

Posts