Posts Tagged ‘jquery’

Usability: Autofocus and not breaking the backspace-button

Tibo BeijenMonday, March 14th, 2011

A while ago during a project we were asked to implement autofocus on the generic search field that every page in the application has. At a first glance a pretty straightforward task, from a technical perspective that is. Not from a user perspective, as indicated by a colleague mentioning his dislike of such autofocus fields “because they prevent backspace going to the previous page”. In this post I will outline some usability considerations and conclude with a jQuery plugin that will take away some of the possible hindrance of autofocusing a field.

Usability considerations

There are some things to consider to determine if such automatic focusing of a search field is actually helpful to the user navigating to the page. Who is the user?

As I was discussing this case with an interaction designer friend (dutch) of mine, he brought up the idea of mimicking the browser’s backspace behaviour, and discussing it further we concluded that this might be useful in some cases but is definitely not a ‘one size fits all’ solution.

Different goals

Different users will probably have different goals when navigating to a page. On the google page or a login screen the majority of the users’ goal is to type something in the first input field. On a lot of other pages this won’t be so obvious. Question then is: Will focusing a search field, if not help, instead hinder the user? For example: A user might have navigated to a page by accident. In that case not being able to go to the previous page by pressing ‘backspace’ might indeed hinder the user.

Different expectations

Not every user navigates to the previous page by using ‘backspace’, some might not even be aware of that possibility. Not every user expects text entered to automatically appear in an input field. Some users might have enabled the option to directly find text in a page when typing text and find this functionality suddenly broken.

Dive into HTML5 has some other nice examples of how autofocus might not be helpful.

What size fits all?

As mentioned before, there is no ‘one size fits all’ solution. Questions that need to be asked include:

  • How many users might be helped by adding autofocus to a common search field?
  • How many users might instead be hindered by autofocus?
  • Are there pages where autofocus on more specific fields (like the main form) is needed which will break consistency throughout the site?

This means studying your site, the target audience, their goals and expectations and based on that finding a balance.

Restoring the backspace: jQuery autofocusBackspace plugin

If the conclusion of aforementioned considerations is that autofocus indeed is helpful, there is more than one way to achieve this: The first is using the HTML5 autofocus attribute. Another is using javascript to focus the field.

As not all browsers support the autofocus attribute yet, and we wanted to preserve the browser’s backspace functionality, I created a jQuery plugin that does just that:

  • It focuses the first matching element
  • It responds to ‘backspace’ by navigating to the previous page.
    • Only until a user has entered text
    • Only until the element loses focus

Refer to GitHub for the jQuery plugin autospaceBackspace.

Feel free to report problems or ideas for improvement.

Taming the Javascript event scope: Closures

Tibo BeijenMonday, July 27th, 2009

When doing client-side developing there are times that jQuery’s get-this-do-that nature doesn’t provide all that is needed. For more complex applications I usually find myself creating javascript objects that ‘control’ a specific part of the page’s interaction. In the objects the application’s state is tracked, references to other objects (could be relevant DOM nodes) are stored and event handlers are set.

One of the problems typically encountered when dealing with javascript event handlers is that they have their own take on the ‘this’ keyword. Closures to the rescue.

Jumping in and out of jQuery land

Tibo BeijenThursday, April 2nd, 2009

Recently I started using jQuery in some projects. In past projects I have mainly been using Prototype and the fact that jQuery also has a $() function made me feel at home right away. That same fact put me a bit off-guard as both functions are in fact quite different:

  • Prototype extends the selected HTML node with added functionality and returns it. Argument should be a HTML node or element id.
  • jQuery selects the HTML node (or nodes) and stores the selection in a jQuery object, which then is returned. Argument should be a css-like selector.

So, as opposed to Prototype, jQuery’s $() method can select a single element as well as a collection of elements. The existence of Prototype’s $$() function also kind of suggests that Prototype’s $() doesn’t do that. And… when passing just an id to jQuery’s $() (e.g. $(‘myDiv’)) it is discovered soon enough that nothing is selected but air.

By using jQuery’s $() functionwe’re leaving the DOM-zone and enter jQuery land. Although jQuery can do a lot, situations might occur where one needs to get the ‘real’ DOM elements. For instance, to pass them as argument to components that don’t talk jQuery. Luckily it’s just as easy to go back, by using the get() accessor.

Some simplified HTML code example boxes:

<div class="codeBox">
    <a href="#">copy to clipboard</a>
    <code>Some code</code>
<div class="codeBox">
    <a href="#">copy to clipboard</a>
    <code>More code</code>

Accompanied by the following javascript:

function initCodeBox()
    $('.codeBox a').bind('click',function() {
        var htmlNode = $(this).siblings('code').get(0);
        if (htmlNode) copyContentsToClipboard(htmlNode);
        return false;
function copyContentsToClipboard(htmlNode)
        // js selecting the text contents of a DOM node, simplified to: 

It’s clear that, as long as existing code doesn’t conflict with the $() function, it’s very easy to start using jQuery in existing projects.

Fronteers: Meeting march 10th

Tibo BeijenSunday, March 15th, 2009

At the PHPgg Frontend Special I first heard of Fronteers, an association of dutch front-end developers. Past tuesday they had a meeting at Media College in Amsterdam. As meetings are open for non(yet)-members it was a nice opportunity to get to know more about Fronteers. Two topics were scheduled: jQuery and SUAVE.


Until now I have mainly used the Prototype framework for Javascript projects. As the prototype library, escpecially when bundled with scriptaculous, is quite ‘big’ I was interested in hearing some more about the ‘lean and mean’ jQuery. In a short (but focussed) presentation of Edwin Martin some of the key aspects of jQuery were illustrated, most notably: Method chaining, Plugins (nice for keeping things organised) and Live events (curious about performance). The jQuery motto ‘do more, write less’ definitely stands although the functionality seems really focused on selecting, modifying and event-binding. I was missing Prototype’s class inheritance but as I read from the Fronteers meeting report that’s being worked in in the form of Classy Query.


Next was a presentation, delivered by Marcel Beumer and Vincent Hillenbrink, about Suave, a stand-alone front-end. It’s a MVC based framework that allows front-end developers to communicate with a ‘back-end’ that exists solely in the viewer’s browser. This way front-end developers can start creating templates and interaction and show working versions, without being dependent on properly functioning back-end software. In the background there is some XSLT databound templating going on thereby allowing for easy integration with back-end software once it’s ready. Suave isn’t finished yet so no online information is available. They aim at releasing a first version in about half a year, bundled with examples demonstrating it’s potential.

Of course there was plenty of time after the presentations to meet some people and chat with co-front-end-developers. Nice meeting!