Drupal 7 - change keyboard types for mobile devices

Overview

With HTML5 comes new <input/> types, which allow for different keyboards on mobile, improving the mobile user experience. However, Drupal by default does not allow for the changing of <input/> types to these new HTML5 types. This tutorial will show how to set up your system to allow for custom input types to be set on any text element.

This tutorial will cover two main steps:

  1. Adding #keyboard_type to form elements for which we want to change the keyboard type
  2. Overriding theme_textfield() to use the #keyboard_type

Step 1: Adding #keyboard_type to form elements

The first thing to do is add #keyboard_type to a form element that we want to change. An example is as follows:

The form element definition is the same as any textfield, however #keyboard_type has been added to the end of the definition.

  1. $form['telephone'] = [
  2.   '#type' => 'textfield',
  3.   '#title' => t('Phone number'),
  4.   '#keyboard_type' => 'tel',
  5. ];

Step 2: Overriding theme_textfield() to use the #keyboard_type

This next step needs to be done in template.php of the site theme. We will override theme_textfield(), and within this function, check to see if #keyboard_type has been set, and if it has, we will change the input type.

  1. function THEMEKEY_textfield($variables) {
  2.   $element = $variables ['element'];
  3.   $element ['#attributes']['type'] = 'text';
  4.   element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength'));
  5.   _form_set_class($element, array('form-text'));
  6.   $extra = '';
  7.  
  8.   if ($element ['#autocomplete_path'] && drupal_valid_path($element ['#autocomplete_path'])) {
  9.     drupal_add_library('system', 'drupal.autocomplete');
  10.     $element ['#attributes']['class'][] = 'form-autocomplete';
  11.     $attributes = array(); $attributes ['type'] = 'hidden';
  12.     $attributes ['id'] = $element ['#attributes']['id'] . '-autocomplete';
  13.     $attributes ['value'] = url($element ['#autocomplete_path'], array('absolute' => TRUE));
  14.     $attributes ['disabled'] = 'disabled';
  15.     $attributes ['class'][] = 'autocomplete'; $extra = '';
  16.   }
  17.  
  18.   // The following three lines of code change the keyboard type if a custom keyboard type
  19.   // has been set in the element definition.
  20.   if (isset($element['#keyboard_type'])) {
  21.     $element['#attributes']['type'] = $element['#keyboard_type'];
  22.   }
  23.  
  24.   $output = '';
  25.   return $output . $extra;
  26. }

Note: As with any theme function override, THEMEKEY needs to be replaced with the actual theme key of your theme.

The above function (THEMEKEY_textfield()) is nearly identical to theme_textfield(), but with the addition of the following three lines:

  1. if (isset($element['#keyboard_type'])) {
  2.   $element['#attributes']['type'] = $element['#keyboard_type'];
  3. }

These three lines check if #keyboard_type has been set in the element definition, and if it has, the input type is altered accordingly.

Conclusion

Using this code can greatly improve your user experience on mobile devices. Any textfield can have #keyboard_type added to it, and this can be done both in original form definitions, or in hook_form_alter() implementations anywhere on a site.