Mobile-friendly input of a digits + spaces string (a credit card number)

Question

I have a credit card number input form that will be used by both mobile and non-mobile browsers.

I want to hint that a keypad should appear on mobile, and to allow (optional) spaces, so either "4111 1234 1234 1234" or "4111123412341234" should be accepted.

From what I've found, the options are:

a) <input type="tel"/> - this seems to behave as I want (with current mobile browsers at least), but it's semantically wrong.

b) <input type="text" pattern="[\d ]*"/> or similar - the iPhone recognises some patterns ([0-9]*, \d*) as working with the keyboard, but this doesn't work as well on Android. Also I'm not sure there are any patterns that the iPhone will give a numpad for that allow spaces, though I don't have an iPhone on hand to check right now.

c) Attempt browser detection with Javascript and use (a) for mobile and (b) for non-mobile. Cludgy, and no real benefit over (a).

<input type="number"/> seems to be a non-starter since Chrome at least will force such input to a number, therefore breaking input with spaces.

Is there a better way of hinting to mobile browsers that they should offer a numpad than using type="tel"?

Edit:

Maybe a -webkit-* property that could be applied to a normal text input field to hint that a numpad should be shown?

Answer 1

The semantically correct markup for a text field that can still contain whitespace and other special characters is <input type="text" inputmode="numeric"/> however as far as I am aware while inputmode is recommended by WhatWG it is not yet supported by any browsers. Its intent is to present the user with a numeric keypad on a device that has it but still behave as a text input.

My suggestion would be to polyfill inputmode with JS and change to type="tel" on touch devices (which is the best solution currently available). Be mindful that differently devices have very different 'tel' and 'number' keypads, iOS 'tel' does not allow spaces while Chrome mobile allows all sorts of special characters. Who knows what custom Android keypads do?

If you don't want to build your own polyfill you can implement Webshim which now polyfills inputmode as of release 1.14.0. This also has has the nice feature of keeping the iOS 'number' keypad invoked by setting pattern="[0-9]*" if you want it (note: this is not the same keypad you get when setting type="number"!)

Here is the analysis I did on input type behavior across browsers and my debate with @aFarkas (the Webshim author) on polyfilling inputmode.

Answer 2

From what I know there is no keyboard layout on the iPhone that allows both numbers and space without at least automatically switching back from numbers to characters. Typing a number with spaces in between will require the user to repeatedly switch back to the numbers keyboard layout after each space.

If you would offer individual input fields for the four blocks of numbers and use some javascript to automatically move over the cursor from one input field to the next once the fourth number has been typed, you could use <input type="number"/> plus you would spare iPhone users from switching between keyboard layouts.