Focusing first control in the form using jquery

Question

Using jquery how do I focus the first element (edit field, text area, dropdown field, etc) in the form when the page load?

Something like:

document.forms[0].elements[0].focus();

but using jquery.

Another requirement, don't focus the first element when the form has class="filter".

Answer 1

You can do it in many ways, using selectors, for example:

$(document).ready(function() {
    $("form:first input:not(.filter):first").get(0).focus();
});

Answer 2

$('form:not(.filter) :input:visible:first').focus()

This will select the first visible input element (<input />, <select>, <textarea>) that doesn't have the class filter in it.

Answer 3

I like to mark my chosen element with a class and select by class rather than leaving it up to the order of the elements on the page. I find this much easier than trying to remember to update my "what's the real first element" algorithm when selecting elements that may or may not be hidden, may or may not be injected by the framework, ...

  $(document).ready( function() {
     $('input.initial-focus:first').focus(); // choose first just in case
  });

Answer 4

For the background I used the script in ruby on rails app. After trying all your answer and found out they all doesn't works, I goggled a bit and found this snippet that works:

$(function() {
  $("form:not(.filter) :input:visible:enabled:first").focus();
});

It turn out $('form :input:first') match the hidden input that rails insert on every form.

Answer 5

This is not a one line solution, but it takes into consideration of the real first user input field (may it be <input /> or <select> tag).

You just have to tweak this a bit more and you get what you need.

P.S: I have tested this code works in FireFox, Chrome, and IE6.

function focusFirstFormField() {
    try {
        var selector = $("#formid");
        if (selector.length >= 1 && selector[0] && selector[0].elements && selector[0].elements.length > 0) {
            var elements = selector[0].elements;
            var length = elements.length;
            for (var i = 0; i < length; i++) {
                var elem = elements[i];
                var type = elem.type;

                // ignore images, hidden fields, buttons, and submit-buttons
                if (elem.style.display != "none" /* check for visible */ && type != "image" && type != "hidden" && type != "button" && type != "submit") {
                    elem.focus();
                    break;
                }
            }
        }
    }
    catch(err) { /* ignore error if any */ }
}

Answer 6

I found this blog which is the only solution I have come across that sets the focus to any kind of control, rather than just the first "input" which could cause unintended side effects such as scrolling the page:

http://www.gerd-riesselmann.net/development/focus-first-form-field-with-jquery

Answer 7

Most elegant solution I've seen:

$(':input:visible:enabled:first').focus();

Taken from http://www.winstonyw.com/2008/09/05/focus-first-form-input-element-with-jquery/