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;
}
}
}
}

4 Responses to JavaScript Function to Automatically Focus Your Curser

  1. Danilo says:

    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.

  2. JavaScript Function to Automatically Focus Your Cursor

    Here’s a little JavaScript function that looks through your forms and puts the cursor on the first textbox or textarea it finds. It’s pretty useful if all your pages use a common header/include so you won’t need to do this…

  3. Jeff Howden says:

    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.

  4. polu says:

    woow, thnx a lot 😀