You have this nice little login form in your home page…
…and you want people to directly login as soon as they get to the site.
To facilitate this, you have set up a small JavaScript code to set the focus automatically to the username text box:
function onPageLoad() {
document.form.username.focus();
}
There is a caveat here though.
Usually programmers place their JavaScript code in the HTML such a way that the code is run only after all the elements in the page is loaded.
Now the user comes to your site, the login form loads, but some other elements in the page are still loading.
The user starts typing in the username, then moves on to fill the password:
Your page completes loading now, and the JavaScript executes and sets the focus to username textbox. The user does not know this, he is still typing the password.
Oops!
The same usability glitch can occur in many similar situations involving user action.
In this specific situation, you can modify the code to something like:
function onPageLoad(){
if(document.form.username.value.length==0) {
document.form.username.focus();
}
}
You can also try executing the script as soon as the form completes displaying, but as far as I know there are no reliable ways to do these because different browsers implement stuff differently. Even in the same browser things work inconsistently in different scenarios.
Nice. Another method is to do this…
document.getElementById(“username”).focus();
Ugly, but valid.
Actually, there was a INPUT tag before that script. And a script tage enclosed the js code – but WP ate it.
That was what I was talking about. This would have been a good solution if it worked reliably. Unfortunately, it doesn’t always.
Different browsers run the embedded JavaScript code in different stages of document load.
[...] Excerpt from: JavaScript: how to set focus in page load | Diovo [...]
Or use jquery
$(document).ready(function(){
$(‘#username’).focus();
});
The ready function is triggered after the dom has completely loaded.
Thanks Joyce……….. its worked
Joyce,
Yeah. JQuery has done it neatly so that you don’t have to worry about the browser implemetations of onLoad.
Again, even if you are using jquery, you have to use the if() condition to make the focus() code work better. That was the point of this article.
Nice idea. This has always bothered me.
Thanks for the info dude.I think even google does’t knows about it.
Silky, Panthayi,
I am glad it helped.
When we open the facebook page, note how the text in “Email” field is highlighted. As the user types in his email address it overwrites that text. Any ideas on how that could be done?
Actually I have tried o it lot more times but it wont work, Can U figure it please.
That is why you run it in a document ready listener?
$(function(){
$(“input”).focus();
});
I know that is jquery but go learn that… or mootools. Raw JS is horrible to work with.
Of course you missed the point (like many others in this thread). This article is not about how to run code on page load.