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?
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.
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.
Related
TLDR: Which input type can utilize the mobile numeric keyboards AND implement masking with spaces injected and a max limit for CVV and Credit Card inputs, such as: XXXX XXXX XXXX XXXX
When building forms, I have seen a varied degree of consistency surrounding the correct input type for credit cards. Here are my discovered pros and cons for each:
type=text
Able to mask easily with various libraries such as cleave.js or set maxLength attribute
Mobile users do not receive numeric-only keyboard, unless setting range to [0-9] (Only iOS users will get this experience, leaving Android users with full keyboard)
type=number
Proper keyboard shown on iOS and Android but unwanted characters can be entered and no maxLength can be set. Min and Max do not limit users from inputting more than 16 characters but do provide error messages when over the max. *Note, this input type is basically ruled out due to leading 0's being deleted. (Unacceptable for CVV's)
type=tel
Able to properly mask and is utilized all over the place, BUT may have unknown impacts on accessibility programs and autofillers. If anyone can provide clarification on the potential side effects of using this input type, that would be awesome!
These are all the types that came to mind. If anyone has any other recommendations, please let me know!
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.
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".
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.
Currently whenever I have an input type=number field the keyboard that opens on my Samsung S7 is a very simplified numeric input that doesn't allow for negative numbers, ideally how do I let the phone see that I am looking for a fuller keyboard? I would like this to be possible on all types of phones.
tl;dr - You can't (with any certainty), until the inputmode attribute is available, which isn't going to be any time soon.
Longer version - <input type='number'> is currently interpreted by device/OS manufacturers as they see fit. There is no other standard way AFAIK of hinting to a device what kind of keyboard should show up on focussing that field.
That said, you might be able to have some influence on some devices by using hacks like that suggested by Chris Coyier, using e.g. <input type="text" pattern="[0-9]*"> which does apparently work for IOS5.
Whether or not that works for any other versions of IOS or your Samsung S7 or for each of the other millions of different phones/devices out there is another matter...
I would like to automatically initiate the numeric keyboard on touch devices for zip code and social security number input fields. Zip codes are entered in a five digit format, while SSNs are entered as 111-22-3333. My understanding is that type=number and type=tel fields will automatically initiate the appropriate keyboard, so these inputs seem appropriate, but I'm not confident they are the right choice.
Type=Number
I originally thought type=number would be the optimal solution (since it sounds semantically correct), but have since found that this type is really only for true numbers and not strings of numeric characters. I've seen blog posts making accusations of browsers automatically including the comma as a thousands separator, and stripping leading zeros on submission (neither of which are zip/ssn friendly).
Type=Tel
From what I have read, this seems like the best solution to my problem. I'm concerned by the meaning of this new type though. Should I really be using a telephone field for zip code and ssn? What if some mobile phone manufacturer decides to start showing the address book for tel fields? That would make no sense for a zip or ssn.
Alternatives
I've found that the new pattern attribute of type=text inputs can be used to trigger the numeric keyboard on iOS devices, but that only partially solves the problem.
I've also found a new attribute inputMode which seems to be the ideal solution, but doesn't seem to be implemented by any browsers yet.
The Question
What I'm hoping is that someone has a suggestion or a best practice? Should I use TEL? Should I go with the iOS solution and ignore other devices? Will inputMode ever work?
My suggestion is to use pattern and inputMode only.
Additionally, Type = number is acceptable if you are only accepting integers between 0-999 and you are okay with the extra validation that will be done - even if the user clicks cancel.
Type=Number has issues even if it is a number, let alone a SSN etc, as it has unpredictable handling of values with regard to negative numbers, localization, precision, leading zeroes, etc, depending on the browser's implementation. Best practice is to avoid unless you have an internal website with a fixed user base where you know the devices/locales being used - unless you are expecting an integer between 0 and 999. Negative numbers, decimals, and thousand characters all will have problems on certain devices.
In addition, if you use 'type' the page will validate data even if the user clicks a cancel button. You could globally turn off validation, but now the page will auto-delete any invalid data on post back! If either of these are acceptable to you, you can use 'type'.
Type=Tel works 'today' but as you point out, it is dangerous to use as who knows what browsers will do in the future. Not to mention that '122-222-2223 Ext.34' isn't even accepted by these devices. I would advise caution if it is a phone number, and avoidance otherwise. The day may come that some device decides to validate the number even though the HTML5 specs say not to.
Pattern=... is good to add. Most browsers will ignore it, so use another validator as well, but at least newer iOS devices will use it, and that's 45% of mobile users.
InputMode=... seems to be the only other hope at this time. Hopefully it will get supported in the future.
I'd like to accomodate as many mobile browsers as possible with number <input> elements. The only problem is that I'm afraid of using the type="number" attribute or type="tel" because some browsers may add their own formatting like commas, parenthesis and hyphens.
These fields I'm using can only accept numbers. I am presently using pattern="[0-9]*" which works brilliantly on an iPhone.
However, on an iPad or any Android phone/table the patter attribute will not automatically select the numeric keypad.
What would be the best approach for bringing up the numeric keypad on as many mobile browsers as possible. Commas, parenthesis and hyphens will break the form.
When developing mobile compatible HTML apps, is there a way to specify that for a specific input[type=text] only numeric digits are allowed?
I want the virtual keyboards to only show numbers.
Is there a way to do that?
With HTML5, yes.
<input type="number" name="n">
Here is a link with all the new for types for input;
http://www.petefreitag.com/item/768.cfm
You can use the attribute pattern=[0-9]. This is the logical way to specify that only digits are allowed. Browsers may or may not take this into account in their UI; currently, they don’t.
Using type=number specifies that the input data should be numeric, and this affects some browsers on mobile devices. But it is not expected to restrict data to digits (numbers may contain other characters too). It is more or less expected to create a “spinbox” control, and on some browsers, like Chrome, it already does that.
The important question is really what kind of data the field is to contain.
In HTML5, you can set the attribute type="number".
Here is a test page for mobile.
Here is the spec.
I think recent mobile versions of WebKit support the HTML5 input type <input type="number"> — see http://caniuse.com/#feat=forms.
It is up to each device’s browser to decide what interface to render though — there’s no way to guarantee that users will only be able to enter numbers. The link in #OnResolve’s answer provides screenshots of what various iPhones and Android phones do with it.
Yes bro <input type="number">
here is a complete list of all input type.
http://javacourseblog.blogspot.in/2013/12/how-to-make-user-friendly-interface-for.html