Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes

There are several tricks for displaying different keyboards on mobile devices for HTML 5 inputs (i.e. <input> tags).

For example, some are documented on Apple's website, Configuring the Keyboard for Web Views.

enter image description hereenter image description here

These are great for usability, but when it comes to an input for for international postal codes (mostly numeric, but letters allowed), we're left with some poor options. Most people recommend using the pattern="\d*" trick to show the numeric keyboard, but that doesn't allow for letter input.

The type="number" input type shows the regular keyboard but shifted to the numeric layout:

enter image description here

This works well for iOS devices, but it makes Chrome think the input must be a number and even changes the input's behavior (up/down increment and decrement the value).

enter image description here

Is there any way to get iOS to default to the numeric layout, but still allow for alphanumeric input?

Basically, I want the iOS behavior for type="number" but I want the field to behave like a regular text field on desktop browsers. Is this possible?

UPDATE:

Sniffing the user-agent for iOS and using the type="number" input type is not an option. type="number" is not meant for string values (like postal codes), and it has other side effects (like stripping leading zeros, comma delimiters, etc) that make it less than ideal for postal codes.

like image 416
Ryan McGeary Avatar asked Aug 21 '14 11:08

Ryan McGeary


People also ask

How do I change the Keyboard layout numbers on my iPhone?

Go to Settings > General > Keyboard > Keyboards. Tap a language at the top of the screen, then select an alternative layout from the list.

How do you type punctuation on iPhone?

To access punctuation on your iPhone keyboard, tap on the 123 button. You'll see all the numbers above various punctuation marks. If the one you are looking for isn't there chances are it will be on the next screen, so tap the new #+= key that's appeared where the shift key was and you can see even more.


1 Answers

Will this work?

HTML:

<input type="tel" pattern="[0-9]*" novalidate> 

This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.

Android / iOS phones:

enter image description here

Desktop:

enter image description here

iPad:

enter image description here

like image 161
Aaron Gray Avatar answered Sep 18 '22 23:09

Aaron Gray