Making Drupal Email Fields Keyboard Friendly

[[Olle]] tweeted this morning:

@ruk I use yr Comment fieldset on iPhone. Email input field does not change keyboard layout to the email-positive one. Can HTML5 attrs?

What Olle means is that when he’s entering his email address in the comment form on a post here, he would like the HTML for the email field to have a “type” of “email,” as documented here:

A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting. 

In other words,the HTML for the email field right now looks like this:

<input type="text" 
       id="edit-mail" 
       name="mail" 
       value="" size="30" 
       maxlength="64" 
       class="form-text required">  

and this results in the iOS keyboard, when focused on this field, looking generic, like this:

iOS Keyboard not in "email address mode"

This isn’t the special “enter an email address” keyboard that would have handier access to the “@” sign, and that would work to ensure that what was entered was, in fact, a valid email address.

How to make this work in Drupal 7?

I installed the Elements module, which defines a new emailfield field type for the Drupal Forms API.

Then in my theme’s template.php I altered the comment form:

function at_ruk_form_comment_form_alter(&$form) {
  $form['author']['mail']['#type'] = 'emailfield';
}

That has the effect of modifying the Drupal comment field HTML to look like this instead:

<input type="email" 
       id="edit-mail" 
       name="mail" 
       value="" 
       size="28" 
       maxlength="64" 
       class="form-text form-email required">

which has the desired effect of rendering an email-address-specific keyboard in the iOS brower:

iOS Keyboard in "email address" mode

Note that handy access to the “@” symbol and the period beside the spacebar.

The effect is similarly positive on the Chrome browser on Android devices:

Email keyboard on Android Chrome.

Thanks to Olle for the inspiration to do this.

Comments

Add new comment

Plain text

  • Allowed HTML tags: <b> <i> <em> <strong> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

About This Blog

Photo of Peter RukavinaI am . I am a writer, letterpress printer, and a curious person.

To learn more about me, read my /nowlook at my bio, read presentations and speeches I’ve written, or get in touch (peter@rukavina.net is the quickest way). You can subscribe to an RSS feed of posts, an RSS feed of comments, or receive a daily digests of posts by email.

Search