Ввод не будет фокусироваться при открытии элемента

Question

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

код, который я до сих пор:

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

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

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

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

Codepen here

Answer 1

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

Обратите внимание, что ваш оригинальный вопрос не содержит код анимации, поэтому другие на этом сайте не смогли бы помочь, если бы они не захотели просмотреть ваш 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'); 
    } 
}); 

И вот CodePen обратно на тебя: http://codepen.io/anon/pen/qaLkYo

Answer 2

Если у вас есть много входов на вашей странице, чем дать конкретный тот, который вы хотите сосредоточиться ID и называть его ID, как это:

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

Answer 3

I updated your CodePen.

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

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

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

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

Я указал, что это дети детей, принадлежащих одному из братьев и сестер. элемента с щелчком.

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

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