HEELPBOOK - Show the at symbol on mobile device on screen keyboard ############################

If you've used a mobile device (e.g. iPhone, iPad, Android phone or tablet) to fill out web forms you'll often find the @ symbol is present on the on-screen keyboard in email fields sometimes, but not always.

Use type="email" instead of type="text" in the input field and it should show the at symbol on the on-screen keyboard.


Input type="email"


Normally text input fields look something like this:


input type="text" ... 


To make the field an email input field so that it has the at symbol on mobile devices on-screen keyboards, do this:


input type="email" ...


######## Other differences with a regular text input

Depending on the browser and version you are using, there will also be client-sided validation of the email input to ensure it matches the following regular expression:


/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/


If the field is not required it can be submitted blank; if it's required or some text is entered into the input, the validation is done and the form won't be submitted unless the address is valid.

Web browsers that don't support type=”email” will simply render the input as a normal text input.


################# Example screenshots from an iPhone

The following screenshots are from an iPhone using the iOS simulator. The input field in the phone on the left has <input type="text"> and the one on the right <input type="email">. As you can see, the on screen keyboard on the left has no @ symbol whereas the one on the right does.

http://heelpbook.altervista.org/wp-content/uploads/2012/09/iphone-keyboard-at-symbol.png


################# Browser compatibility

As mentioned above, if the browser doesn't support type="email" it will treat the input as if it were type="text".

From my testing with the iOS Simulator, versions 4.3.2 and 5.1 will show the @ symbol when it's an email input, but don't do the regular expression validation. I haven't tested other versions.

When using either the LG keyboard or the Android one, it didn't show the @ symbol and in neither case did the validation.

If anyone knows of a compatibility table for this input type, please let us know and we can link to it from here.


############# Further reading

The input type=email page on the W3C website has a list of all the available properties for this element and a brief description of each.


############ ARTICLE INFO #############

Article Month: September
Article Date: 14/09/2012
Permalink: http://heelpbook.altervista.org/2012/show-the-at-symbol-on-mobile-device-on-screen-keyboard/
Source: http://www.electrictoolbox.com/show-at-symbol-mobile-device-screen-keyboard/
Language: English

View more articles on: http://www.heelpbook.net/
Follow us on Facebook: http://it-it.facebook.com/pages/HeelpBook/100790870008832
Follow us on Twitter: https://twitter.com/#!/HeelpBook
Follow us on RSS Feed: http://feeds.feedburner.com/Heelpbook
Follow us on Delicious: http://delicious.com/heelpbook
Linkedin: http://it.linkedin.com/pub/stefano-maggi/27/73a/b20