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 supportinputmode
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"
.