Блог

Пытаюсь сфокусировать ввод, когда класс открыт в родительском контейнере.

Код, который у меня пока есть, это:

 $("#search-trigger").click(function(){
 $("input").focus(); 
});
  

Который работает странно, только когда элемент начинает закрываться. Итак, я изменил его на:

 $("#search-trigger").click(function(){
  if(("#target-2").hasClass("open")){
    $("input").focus();
  }else{
  $("input").blur();}
});
  

Который вообще не работает. Есть идеи?

Откройте код здесь

Я думаю, что основная проблема здесь заключалась в том, что ввод не был выполнен анимационным, поэтому jQuery не смог сосредоточиться на нем. Решением было бы использовать onComplete событие TweenMax для фокусировки на элементе после отображения целевого объекта.

Обратите внимание, однако, что ваш исходный вопрос не содержал кода анимации, поэтому другие пользователи этого сайта не смогли бы помочь, если бы они не хотели просматривать ваш CodePen.

Вот новый JavaScript, который я создал, хотя вы можете просто изменить свой исходный код, чтобы вместо него использовать onComplete функцию:

 $('.trigger').click(function(e) {
  //remove active class from other triggers
  $('.trigger').not(this).removeClass('active');
  //toggle active class on this trigger
  $(this).toggleClass('active');
  //get target element
  var target = $('#'   $(this).attr('data-target-id'));
  //hide all elements of target class, except the current target
  if($('.target.open').not(target).size() > 0) {
    TweenMax.to($('.target.open').not(target), .2, {display:'none', y:'0%', autoAlpha:0});
    //remove open class from target elements that are now hidden
    $('.target.open').not(target).removeClass('open');
  }
  //if this element is now active
  if($(this).hasClass('active')) {
    //show current target element
    TweenMax.to(target, .2, {display:'block', y:'100%', autoAlpha:1, onComplete:function() {
      //once animation is complete, if the target has an input, focus on that input
      if(target.find('input').size() > 0) {
        target.find('input').focus();
      }
    }});
    //indicate that this target class element is now open
    target.addClass('open');
  }
  //if the element is no longer active
  else {
    //hide the target
    TweenMax.to(target, .2, {display:'none', y:'0%', autoAlpha:0});
    //remove open class from newly hidden target element
    target.removeClass('open');
  }
});
  

И вот вам дополнение к коду:http://codepen.io/anon/pen/qaLkYo

Я обновил ваш CodePen.

У вас продолжается анимация…
Я не проверял, как это достигается, поскольку это делает внешняя библиотека (TweenMax).

Но, увидев анимацию, я подумал о задержке.
И это мой ответ.

Вы не можете focus использовать элемент, для которого display установлено значение none .
Это отображение настроено на block или inline-block где-то в вашей анимации…

Я обнаружил, что в этом случае задержки в 10 мс было достаточно.
И просто для уверенности мы выбираем правильный input , потому что даже если в этом примере есть только один… На вашем сайте наверняка будет больше.

Я указал, что это дочерние элементы родственного элемента выбранного элемента.

Вот соответствующий код:

 // This is the code for the input focus
$("#search-trigger").click(function(){
    var searchInput = $(this).siblings().find("input");
    setTimeout(function(){
        searchInput.focus();
    },10);
}); 
  

Если у вас на странице много входных данных, укажите конкретный, на котором вы хотите сфокусировать идентификатор, и назовите его по идентификатору следующим образом:

  $("input#my-input").focus();