It seems pretty simple, but still far too many web sites don’t set the focus on the input field that users are most likely to type into when loading a page.
Let’s say you have a page with an HTML form with the ID login with fields named user and password. Here’s the HTML and JavaScript for setting the focus to the user field on page load. IE lets you get away with being a bit sloppy and not properly referencing the HTML form element, but the code below works on Firefox, Safari, and other standards-compliant browsers.
<html>
<head>
<title>Focus Test</title>
<script>
function setFocus() {
var loginForm = document.getElementById("login");
if (loginForm) {
loginForm["user"].focus();
}
}
</script>
</head>
<body onload="setFocus();">
<form id="login" method="post" action="">
<table>
<tr>
<td><div align="left">User Name:</div></td>
<td><div align="left"><input name="user" type="text"
size="30" maxlength="30" tabindex="1" /></div></td>
</tr>
<tr>
<td><div align="left">Password:</div></td>
<td><div align="left"><input name="password" type="password"
size="30" maxlength="50" tabindex="2" /></div></td>
</tr>
</form>
</body>
</html>
You can prove to yourself it works here.
Of course, there are lots of slight variants on this. You could give the field an ID and set the focus directly on it without getting the form first.
Doesn’t work? 🙁
Hmm, it used to work for me on Firefox 3.0.x.
But, it’s not working for me on a pre-release of Firefox 3.1. I’m using Shiretoko as a browser now. Shiretoko is an Intel-optimized binary for OS X based on 3.1b3pre of Firefox. Then again, I’ve run into a bunch of problems with this build of Firefox (both the official Mozilla beta build and Shiretoko).
It works on Safari 3.2.1.
@Bas, what browser are you using?
In Firefox you can set accessibility.tabfocus to make tabbing into the first text field easier on any page.
via: Lifehacker, via: ghacks.net
Worked like a charm. Thanks.
You would think there should be an eazier way. Like just setting an elements property for focus to true.
http://www.mediacollege.com/internet/javascript/form/focus.html
It is fantastic. It works with me. Thank you.
focus().. I don’t use it often enough to remember it lol… Thank you!
Is there a way to change the focus of a web page directly using the html link? Something like….
http://www.webpage.html:username (where username is the field I want to set the focus to on load)
I would like to be able to open a specific webpage and have it automatically drop me in the field I need to start typing information into. I thought I remember doing something like this several years ago but cannot remember excactly how I did it.
Any help would be greatly appreciated.
Thanks,
Chip
Is there a way to change the focus of a web page directly using the html link? Something like….
This… www . WebPageAddress . html : ‘username’ (where ‘username’ is the field I want to set the focus to on load)
I would like to be able to open a specific webpage and have it automatically drop me in the field I need to start typing information into. I thought I remember doing something like this several years ago but cannot remember excactly how I did it.
Thanks,
Chip