Фокусировка первого элемента управления в форме с использованием jquery

Question

Используя jquery, как мне сфокусировать первый элемент (поле редактирования, текстовая область, раскрывающееся поле и т. Д.) в форме при загрузке страницы?

Что-то вроде:

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

но с использованием jquery.

Другое требование, не фокусируйте первый элемент, когда форма имеет class = "filter".

Answer 1

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

Это выберет первый видимый элемент ввода (<input />, <select>, <textarea>), в котором нет класса filter.

Answer 2

Для фона я использовал скрипт в приложении ruby ​​on rails . Перепробовав все ваши ответы и выяснив, что все они не работают , При поиске в Google я нашел этот фрагмент, который работает :

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

Оказывается, $('form :input:first') соответствует скрытому вводу, который rails вставляет в каждую форму.

Answer 3

Мне нравится помечать выбранный элемент классом и выбирать по классам, а не оставлять их в порядке расположения элементов на странице. Я нахожу это намного проще, чем пытаться вспомнить, чтобы обновить мой алгоритм «что такое настоящий первый элемент», когда выбираются элементы, которые могут или не могут быть скрыты, могут или не могут быть внедрены средой, ...

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

Answer 4

Это не однострочное решение, но оно учитывает поле ввода первого пользователя real (может быть тег или

Вам просто нужно немного подправить, и вы получите то, что вам нужно.

P.S .: Я проверял, работает ли этот код в FireFox, Chrome и 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 5

$("form").find('input[type=text],textarea,select').filter(':visible:first').focus();

Answer 6

У меня были некоторые проблемы с диалоговыми окнами jQuery, которые были невидимы на странице, но все еще были выбраны селектором:

$(":text:visible:enabled:first").focus();

После долгих тренировок я наконец-то нашел решение, которое исключало все входные данные в div с классом .dialog, добавляя ".not ()" в конце. Это может пригодиться кому-то еще. Это мой селектор:

$(":text:visible:enabled:first").not("div .dialog input").focus();