Автофокус на первом пустом поле в форме

Я пытаюсь добиться функциональности автофокуса в первом пустом поле формы, которое может быть элементом ввода или любым другим видом, т.е.

1. textbox
2. radio button
3. Select
4. checkbox

Я просмотрел веб-сайт jquery и попытался использовать селектор :input, но я не могу добиться автофокуса в любом поле ввода, кроме текстового поля. Я также настроил JS Fiddle,

Скрипка для кода

Может ли кто-нибудь помочь здесь?


javascript html jquery model-view-controller autofocus
person CSharped    schedule 05.10.2015    source источник
comment
Вы вообще читали вопрос, если это имеет смысл?   -  person Praveen Kumar Purushothaman    schedule 05.10.2015

Ответы (2)


arrow_upward
5
arrow_downward

Вам может понадобиться использовать filter(), чтобы найти входные данные с пустыми значениями:

$(function () {
    $("input:enabled").filter(function () {
        return this.value.trim() == "";
    }).first().focus();
});

Это не сработает, если вы используете checkbox. Итак, для этого:

$(function () {
    $("input:enabled").filter(function () {
        if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio")
            return $(this).val().trim() == "" || !this.checked;
        else
            return this.value.trim() == "";
    }).first().focus();
});

Скрипт: http://jsfiddle.net/7fwrd2rk/

person Praveen Kumar Purushothaman    schedule 05.10.2015
comment
Привет, Правин, мне это не очень помогло, посмотри на эту скрипту 1 - person CSharped; 05.10.2015

arrow_upward
2
arrow_downward

Вам нужно filter() удалить пустые/непроверенные входные данные и установить фокус на первый элемент в соответствующем наборе, как показано ниже.

$(function () {
    $("input:enabled").filter(function () {
        return this.type.match(/checkbox|radio/i) && //when it's a checkbox/radio
               !this.checked || //get me a list of unselected ones
               ($.trim(this.value) === ""); // else get me a list of empty inputs
    }).first().focus(); //grab the first from the list and set focus
});

Вот демонстрация в том же духе.

Это включает текстовое поле и выбор.

person lshettyl    schedule 05.10.2015