Auto-focus – Do it! It’s just lazy not to.

In this article I will discuss the need as a developer to use an auto-focus on your XPages. You do this when the end-user needs to type something onto your webpage and should not have to use their mouse to click in the field first.

Introduction

You’ve been there – you go to a website internal or external to your company and you have to login in or type something into the page – the search field or something of that ilk. It is the only field on the whole page and you have to use your mouse to focus on the field – frustrating beyond belief and quite frankly, lazy on the part of the developer. It is a pet peeve of mine when something as simple as one line of code can make a big difference to the first thing a user does on your site.

Can you imagine going to Google.com and having to focus on the field to get started on your search? Stupid idea – or so you would think.

Login Pages

The login page is perhaps the most obvious thing – as the developer you should ALWAYS focus on the username field – it is just lazy not to! It is harder on the user to have to click in the field and they are entering your website with an irritation on their mind already.

Auto-focus on the Username field
Auto-focus on the Username field

 

So how do we do this?

Well it depends on what takes your fancy that day…..but this is normally something you would do within some <script> tags on your web page.

Using the plain old JavaScript method

  document.getElementById("username").focus()

In Dojo

  dojo.byId("username").focus()

In jQuery

  $("#username")[0].focus()

NOTE

We use the [0] to get the DOM Node element and use the HTML focus() method
.focus() when applied to a jQuery object is an event handler which determines what happens when you focus on something  – be careful to use correctly

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});

In HTML5

The autofocus attribute of a field is new in HTML5 (thanks to David Walsh). You can also focus on a button and other DOM objects

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
Advertisements

8 thoughts on “Auto-focus – Do it! It’s just lazy not to.

  1. Autofocus can bite you on a slow network connection. The JS runs after the page loaded, but the user might start typing when the images are not visible yet. So (s)he might be in a different field already when the .focus kicks in and is janked back. Haven’t tried the behavior in HTML5.

    • Good point Stephan – I would overcome this issue by putting the script tag immediately after the field in the HTML so that it is executed as the page is loaded rather than waiting for the document.onLoad

      • You should “never” wait for onLoad. “onDomReady” is another matter, that’s what dojo.ready / dojo.addOnLoad is for. They will trigger as soon as the DOM is ready (the HTML is all loaded and parsed, but not wait until all images are available as onLoad does).

        Best practice is to keep JavaScript in separate files, so a combination of dojo.ready with document.activeElement should work and you can still keep your logic separate and cache friendly.

        https://developer.mozilla.org/en-US/docs/DOM/document.activeElement

  2. Always remember the user who does not have the luxury of good sight and relies on tools to help them navigate a web site. Javascript based auto focus can be disruptive for these types of users in that it moves the focus of the screen reader from the top to where you have focused and could make it harder for such a user to understand the page they are trying to use or navigate.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s