I use this block of code quite often. Almost every project I develop has a login page and I always toss this in to give it that subtle boost to the overall user experience. Once the page has loaded, the cursor location will automatically be set to the username field so the user doesn’t have to grab their mouse or tab over to it just to log in. I’ve seen far too many site that don’t use this and it always frustrates me.
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
</script>
I would also recommend this on any page that has a form element on it that must be filled out. However be careful not to use it on a page that has a form field that the user may not be interested in. A good example of bad placement for this block of code is AVN Ads which sets focus to the search box instead of the username field. Every time I go there I get half way through typing my username and password before it jumps up to the search box and I in my haste I end up typing my password into the search field for all the world to see.
A seasoned Senior Solutions Architect with 20 years of experience in technology design and implementation. Renowned for innovative solutions and strategic insights, he excels in driving complex projects to success. Outside work, he is a passionate fisherman and fish keeper, specializing in planted tanks.
If using this technique, consider using document.activeElement first to discover whether you would stealing focus from already focused, form elements or other notable page elements.
i use jquery
$(document).ready(function(){
$(“#loginName”).focus();
});
You’re my friend, Fettes, but I totally disagree here. The most annoying thing in the world (next to rebooting for Windows Vista updates) is when your cursor moves as you’re typing something because you navigated to a new page. Let me control my own mouse and stop moving the focus.
A user interface should never move as you go to use it!!!
Agreed with John.
What if…. we checked if all inputs are empty before focusing anything? This is trivial to do in JavaScript, and would make it a LOT less annoying.
Oh also, document.activeElement was IE-only last I heard. Bad!
@John I agree to an extent but if you have a commonly used input box on the top of the page, then you should add the focus code directly after the input while disregarding the onload event.
Example:
Search:
s = document.getElementById(‘searchtext’);
s.value = ”; s.focus();
Is it shitty to have Javascript outside the head element? Yes. But there are workarounds.
Edited:
[Note] — = less than / greater than
@John I agree to an extent but if you have a commonly used input box on the top of the page, then you should add the focus code directly after the input while disregarding the onload event.
Example:
Search: –input type=”text” name=”searchtext” id=”searchtext” value=”” /–
–script language=”JavaScript” type=”text/javascript”–
s = document.getElementById(‘searchtext’);
s.value = ”; s.focus();
–/script–
–input type=”submit” name=”submit” value=”Search” /–
Is it shitty to have Javascript outside the head element? Yes. But there are workarounds.
Thanks a lot for helping me to set the default focus on the text field.
i have the problem to set focus. In my case when some on change event fire the page become loaded and the cursor move to the address bar of the web page .But i need to keep focus on same element after page load which is focused before.Plzzzzzzzzzzz urgent help me… i have tried no of ways…
advanced thanks