Tackling automatic field focus usability issues
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 Chris Kaminski 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<elms.length;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 :-).
October 10th, 2006 at 2:27 am
Hey, I don’t think this is focus’s fault, is
window.onload’s problem. If you can trigger JavaScript when dom is ready to use not everything downloaded viawindow.onload.Just my thoughts.
October 10th, 2006 at 6:21 am
You mean as I explain in the paragraph after the first code example?
This is one solution, but it fails when there is more than one form on the page and your focus field is not in the first.
October 11th, 2006 at 2:15 pm
Hi,
I just installed your news scroller, but it snaps off the bottom headline. How do I fix that?
October 11th, 2006 at 2:23 pm
Hey, that’s pretty slick. I’ll have to play with it a bit. Nice.
October 12th, 2006 at 2:20 am
Chris, interesting solution. I still don’t like autofocus as it can do other strange things like scroll the page to where the form field is (I had this problem on a Yahoo! page - in their fantasy football section) but if needed, this is definitely an elegant solution.
November 4th, 2006 at 2:51 am
Or you could have something like
onfocus="cancelInitialFocus()"on each form field.Or I think you can do
document.addEventListener('focus',cancelInitialFocus,true)and thetargetwill be the form field that gets focused. I seem to remember being able to do something equivalent in IE.February 4th, 2007 at 9:36 pm
August 6th, 2007 at 1:14 am
Hey, neat! That’s a good idea. One improvement might be possible. It looks like you’re using “elms” to hold the id’s of all the input fields. But you could replace
var elms = ['email','pw'];
for(var i=0;i<elms .length;i++){
var elm = document.getElementById(elms[i]);
with something along the lines of
var elms = document.getElementsByTagName("input");
for(i=0;i<elms .length;i++){
var elm = elms[i];
to make it more generic.
~d
September 25th, 2007 at 1:32 am
I have a reasonably slick generalized autofocus script that addresses the “don’t mess with me when I’m already typing” issue, though not the focus-to-below-the-fold issue. (That one’s rough.) Also handles Firefox open-in-new-tab without-switch-to, which is somewhat difficult. (Firefox apparently silently fails to set focus in a non-active tab.) Non-link directions are that it’s in the Grimoire section of lostsouls.org.
February 23rd, 2008 at 5:29 pm
does anyone knows if there is any other information about this subject in other languages?
July 29th, 2008 at 4:06 pm
but what i need is different, i want some auto-focus script to support my manual scrambler against keylogger in the cafe/public net.
example my password is “god”
i try to fool the keylogger by scrambling what i type into login form. but they still getting log like this:
“g (click) adsfadsf (click) o (click) asdfasdf (click) d (submit)
so they get my password is “god”!
but if my browser use auto-focus, they will get log like this:
“gadfasdaoasdfasdfd”
so, can somebody tell me how to make some auto-focus script into Firefox?