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.
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>
Xomino 
Shame you can’t auto focus on iOS
Sure you can!
Here’s an example that triggers focus in a text field (shows the keyboard).
You could call this in a function when the DOM is ready.
http://ftlabs.github.com/fastclick/examples/focus.html
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
The other area where autofocus is good for users (but it’s easy to be lazy) is after a partial refresh
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.