« JavaScript References | Main | Flash Detection Kit Macrochat Tomorrow (Friday) »
January 25, 2005
JavaScript Function to Automatically Focus Your Curser
Here's a simple JavaScript function that iterates through all the forms on a page and drops the cursor in the first text or textarea input it finds. Not rocket science, but useful. If you're building an application, you probably include a header from each page, so the way to use this function is to put it in your header (or better yet, source or include it from your header), and call it onLoad. That way, it will automatically work on any page in the application with a form on it. If a page doesn't have any forms, or you have a form with no text or textarea inputs, the function does nothing.
function focusCursor()
{
for (var i = 0; i < document.forms.length; ++i)
{
var f = document.forms[i];
for (var j = 0; j < f.elements.length; ++j)
{
if (f.elements[j].type == 'text' ||
f.elements[j].type == 'textarea')
{
f.elements[j].focus();
return;
}
}
}
}Posted by cantrell at January 25, 2005 11:18 AM
Comments
You better hope you have a fast server. I've been to sites that used this type of funciton (although generally they specify the field by name) and had a slow server. I'll be finished filling in the filed and have moved onto the next filed, or even a couple down the line, and this function will drop you back into the first field.
There are two ways to go that would be better:
1. You place the focusing code in a script block immediately after the first form field and have it run right away and not onload.
2. Make your code smarter so that it checks the value of the field against the defaultValue attribute before focusing. That way if the user has already entered in some info, you don't do the focus.
Posted by: Danilo at January 25, 2005 12:02 PM
Developers should be very careful about using this function with any forms that incorporate disabled form fields or styling that sets the display of some form fields to none or visibility to hidden. If used in it's current form, an error will be thrown when trying to focus the first form field if affected as described.
This conundrum further complicates an otherwise elegantly simple script. Now, we not only need to check for the type of the form field, but we also need to check if the field is in a state to receive a focus without throwing an error. While we're busy trying to cover all our bases, it is important to note that not all browsers return the form field type property in lowercase. Therefore, it would be prudent to call the toLowerCase() method on the type prior to checking for equality against an all lowercase text string.
I haven't personally explored the creation of a self-contained "smart" field-focusing function like this, so I don't know all the pitfalls or have code-level recommendations, but I thought I'd pass on obstacles I've experienced with focusing form fields.
Posted by: Jeff Howden at February 15, 2005 1:07 PM
woow, thnx a lot :D
Posted by: polu at March 3, 2006 3:09 AM
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).