• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Show the at symbol on mobile device on screen keyboard

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.

iphone on screen keyboard and the at symbol

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.

The only testing I did on Android is on my LG Android 2.2.1 phone. When using either the LG keyboard or the Android one, it didn’t show the @ symbol and in neither case did the validation. I don’t know if this is addressed in later versions of Android or not.

If anyone knows of a compatibility table for this input type, please let me know and I 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.

Check Out These Related posts:

  1. How to Install Linux screen
  2. CSS3 rounded corner input
  3. Toggling a password field between plain text and password
  4. Master Mobile Web Apps with jQuery Mobile 3rd Edition

Filed Under: HTML And CSS

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap