Christian Heilmann

Tackling automatic field focus usability issues

Monday, October 9th, 2006 at 4:53 pm

One of my greater annoyances on the web is sites that automatically focus a form field when the page has loaded. Supposedly this should make it easier for you to use the product, as you are to log-in anyways, but there is one real problem with this.

If you try the demo page for a normal autofocus and start typing in your details, it can happen that you are already in the middle of your password when the page is ready and the focus gets shifted to the email field. I have seen this happening in Internet Cafes, where people inadvertedly revealed their passwords that way.

The reason is the simplicity of the scripts applied to focus the field when the page has loaded, which sometimes is as rudimentary as:


window.onload = function() {
document.getElementById( ‘email’ ).focus();
}

Now, I wondered how to make that better. A simple solution would be not to use onload on the window (and thus waiting for the document and all dependencies to be loaded before you proceed) but use onAvailable or equivalent solutions on the element itself instead. However, if the element to highlight is not the first, that would still make it possible to enter other data until the focus gets taken away from you.

Next I considered to read out the event target when the page has loaded and assume that if the target has a node name, someone is entering data. That proved to be to flaky (as [link:http://setmajer.com/,Chris Kaminski,colleague met] predicted, darn you!) as MSIE told me undefined whenever.

Thus, I dug deeper into my memory of form elements and unveiled the idea of value versus defaultValue. The latter, rather less known is the value set in the HTML attribute, whereas the value is the value of the field. Value changes when the user enters data or changes the element’s state (in case of checkboxes), but defaultValue doesn’t.

Using this information it is easy to set up a better autofocus script that will not focus the element when any of the data in the form deviates from the original settings in the HTML.


window.onload=function(){
var isfocused = false;
var elms = [‘email’,’pw’];
for(var i=0;i var elm = document.getElementById(elms[i]);
if(elm !== undefined){
if(elm.value != elm.defaultValue){
isfocused = true;
}

}
}

if(isfocused != true){
document.getElementById(‘email’).focus();
}

}

All you need to edit is the elms array listing the IDs of all elements to check :-).

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Dev Digest 146: 🥱 React fatigue 📊 Query anything with SQL 🧠 AI News

Why it may not be needed to learn React, why Deepfake masks will be a big problem and your spirit animal in body fat! 

Dev Digest 147: Free Copilot! Panel: AI and devs! RTO is bad! Pi plays!

Free Copilot! Experts discuss what AI means for devs. Don't trust containers. Mandated RTO means brain drain. And Pi plays Pokemon!

Dev Digest 148: Behind the scenes of Dev Digest & end of the year reports.

In 50 editions of Dev Digest we gave you 2081 resources. Join us in looking back and learn about all the trends this year.

Dev Digest 149: Wordpress break, VW tracking leak, ChatGPT vs Google.

Slowly starting 2025 we look at ChatGPT vs Google, Copilot vs. Cursor and the state of AI crawlers to replace web search…

Dev Digest 150: Shifting manually to AI.

Manual coding is becoming less of a skill. How can we ensure the quality of generated code? Also, unpacking an APK can get you an AI model.

My other work: