.focus() не работает внутри .ВКЛ (‘click’, function (event)

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

$('a.scroll-link').on('click', function(event) {
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();               
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

Я пытаюсь добавить событие focus (), чтобы сосредоточиться на всем элементе формы. Это не работает, и я не могу понять, почему. Я попробовал несколько вариантов следующего кода:

$('a.scroll-link').on('click', function(event) {
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();
        $('#mainForm').focus();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

Вариация #2:

$('a.scroll-link').on('click', function(event) {
    $('#mainForm').focus();
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);

    }
});

Вариация #3 с таймаутом:

$('a.scroll-link').on('click', function(event) {
    var target = $(this).attr('href')
    if (target.length) {               
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800);
        setTimeout(function() { $('#mainForm').focus() }, 3000);
    }
});

Ни один из них не работает. К вашему сведению, я изменил фокус() на функцию addClass (), и это работает просто отлично. Но фокус гораздо предпочтительнее, потому что он исчезает, когда индивидуальный вход выбран. Я бы предпочел не писать другую функцию, чтобы удалить класс, когда ввод сосредоточен. Большое спасибо.

3 ответа

  1. Вы уверены.focus(), что используете для фокусировки форму?
    В большинстве случаев focus будет использовать одно поле ввода для ввода пользователя, вы должны выбрать поля ввода в этой форме, но не все из них.

  2. Так что я и сам это понял. Это не имело ничего общего с кодом jQuery, а скорее с HTML. Для того .focus(), чтобы иметь влияние на такой элемент, как a<form>, он должен иметь набор tabindexзначений, чтобы сделать его фокусируемым. Поэтому я обновил свой html, чтобы выглядеть так:

    <form name="mainForm" id="mainForm" tabindex="-1">
    

    Добавление tabindexзначения делает его работоспособным. И в случае, если кто-то заботится, я использовал следующее Для моего кода jQuery, так что прокрутка страницы происходит перед фокусом. В противном случае при первом фокусировании страница переместится в нижнюю часть формы, а затем прокрутится до начала формы:

    $('a.slide-down').on('click', function(event) {
      var target = $(this).attr('href')
      if (target.length) {               
          event.preventDefault();
          $('html, body').animate({
              scrollTop: $(target).offset().top
          }, 800);
          $('#mainForm').focus();
        }
    });
    

    Спасибо всем за другие предложения, хотя.