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.
Related
I have a case sensitive username field in my web app. In most instances, it works fine. Unfortunately, Safari on iOS and Chrome (sometimes) on Android want to "help" by capitalizing the first letter of any text entered into the input.
Since this is an <input type="text"> the first input letter is uppercase on those devices. This is driving users nuts as it takes a lot of effort to override and some don't even notice the change but it causes login to fail.
I can't simply say string.toLowercase() in my javascript since users are allowed to have mixed case logins. I just want the browsers to stop deciding which letters to make uppercase...
As I was typing this a friend pointed me to HTMLInputElement Autocapitalize="off" and that seems to do the trick very easily.
Turns out that this can be included with autocomplete="off" to mostly control how mobile browsers deal with inputs.
So basically <input type="text" autocapitalize="off" required placeholder="username" /> solves my specific problem.
According to iOS and Android docs this doesn't always work but it should solve the majority of problems.
Bonus: This isn't an all or nothing setting like allowing zoom. You can apply it selectively to inputs where it's needed and allow inputs that need more of a "copy" style content to continue helping the user.
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.
This has already been asked numerously and lots of examples have been provided, either with tons of JavaScript, or using the inputmode or the pattern attribute with some regex. However, none of these seem to work together with the numeric keyboard (at least not on my iPhone).
Therefore my question: is this impossible? (in plain and simple HTML5)
I need an <input> for currency with on-the-fly formatting, to edit numbers like this: 1,000,000.00 or, when changing the country, to 1 234 567,89 AND the numeric keyboard appears (important for mobiles). Notice the thousands separators.
Only HTML5 will not work today. (6-6-2016)
What you want is this:
<input type="text" pattern="your-pattern" inputmode="numeric">
However, inputmode is not supported in any browser yet.
The code above explained:
We can't use type="number" because the pattern attribute is not supported on that type, so we use type="text". A better choice might be type="tel" because it's also concerned with numbers and delimiters. However, I don't know the semantic implications of this (on SEO and screenreaders for instances). The safest approach is text
inputmode is new and allows you to specify what kind of input mode is required. Especially useful for mobile devices, as you can imagine
Considering you want to have on the fly conversion from one standard notation to another, you will have to use JavaScript so you can use it for your pattern validation if you really want to use a number type. Or maybe there is even another public API to control the keyboard through JS (but I doubt it, may cause security issues).
Finally, as always: if your validation is important, do it server-side. The client-side should never be trusted. (Even if they have cookies.)
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.
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