Show the at symbol on mobile device on screen keyboard

Posted in HTML and CSS -

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.




Comments