Geek Answers Handbook

What is the correct input type for credit card numbers?

TL; DR: What type of input can use mobile numeric keypads AND implement masking with spaces entered and the maximum limit for CVV and Credit Card inputs, such as: XXXX XXXX XXXX XXXX

When creating forms, I saw varying degrees of consistency with the correct input type for credit cards. Here are my open pros and cons for everyone:

type = text

  • The ability to easily mask various libraries such as cleave.js or set the maxLength attribute
  • Mobile users do not get a keyboard with a digital interface unless you set the range to [0-9] (only iOS users will get this experience, leaving Android users with a full keyboard).

type = number

  • The correct keyboard is displayed on iOS and Android, but unwanted characters can be entered and the maximum length cannot be set. Min and Max do not limit users to more than 16 characters, but provide error messages when they exceed the maximum. * Note. This type of input is largely eliminated by removing the leading 0. (Not acceptable for CVV)

type = body

  • The ability to properly mask and is used everywhere, BUT may have an unknown effect on accessibility and autofill programs. If someone could give an explanation of the potential side effects of using this type of input, that would be great!

These are all the types that came to mind. If anyone has any other recommendations, please let me know!

+8
html google-chrome
source share
1 answer

Here is the inputmode attribute that was designed for this, it has not yet been implemented (actually deprecated in HTML 5.2), but worked on it there (FF / Chrome).

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

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

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

or implement custom input using a mask, as you are currently using.

+1
source share

More articles:


All Articles