What is the correct input type for credit card numbers? What is the correct input type for credit card numbers? google-chrome google-chrome

What is the correct input type for credit card numbers?


HTML

If you're trying to do this strictly with HTML, I believe the following is going to get you about as close as is currently possible:

<label for="ccn">Credit Card Number:</label><input id="ccn" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
  • inputmode sets the keyboard type (in this case, numeric)
  • pattern enables validation (in this case, numbers and spaces with a length of between 13 and 19) and it helps with keyboard type for browsers that don't yet support inputmode
  • autocomplete tells browser what should be autocompleted (in this case, a credit card number)
  • maxLength prevents the user from entering more than the set number of characters (in this case, 19, to include numbers and spaces)
  • placeholder gives the user an example (formatting hint)

JavaScript

For a more robust solution, JavaScript is going to be required. And rather than roll your own solution, it'd probably be best to use a battle-tested library. Cleave.js (as you mentioned) is a popular choice.


There's an attribute inputmode that's designed for that, it's not implemented yet (actually deprecated in HTML 5.2), but there's work done on it (FF/Chrome).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

And see this discussion: https://github.com/whatwg/html/issues/3290

For now set the autocomplete attribute to the correct value: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

or implement a customized input with mask like you're using now.


I’ve seen using type="tel" on many places, for the reasons you mention.

I would not recommend type="number" as then you have to fiddle with in/decrement arrows etc. And from certain point of view it is not a “number” in terms of what we usualy do with numbers (maths), see this comment on CSS tricks forum.

Another trick how to force numeric keyboard is using pattern="[0-9]*". This should work on iOS only. To make it work on Android as well, you have to combine it with the type="tel".