Giving the username textfield keyboard focus

This recipe will detail how keyboard focus can be assigned to the username field in the login block. This will ensure that the user does not need to use the mouse or tab through the page to log in to the site.

Getting ready

We will be using the mysite module created earlier in this book to hold our odds and ends. It is assumed that this module has been created and is enabled.

How to do it...

The following steps are to be performed inside the mysite module folder at sites/all/modules/mysite.

1. Create if necessary, and navigate to the JavaScript folder at sites/all/modules/mysite/js.

2. Create a JavaScript file named userfocus.js and open it in an editor.

3. Add or merge the following JavaScript to the file:

   Drupal.behaviors.mysiteUserFocus = function(context) {
   // console.log($('input#edit-name'));
   $('input#edit-name').focus();
   }
   

   The line of jQuery functionally relevant to this recipe has been highlighted. The ID of the username textfield—edit-name—was located...