Атрибут автофокусировки не работает при изменении состояния дисплея

Question

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

Впервые автофокус работает нормально, но после скрытия формы и отображения ее снова автофокусировка больше не работает.

Есть ли способ достичь этого с помощью jQuery? И какой код мне нужен?

HTML:

<div class="header-search"> 
          <div class="search-container"> 
           <div class="overwrite-setting"> 
            <i class="sf-icon-search"></i> 
           </div> 
           <div class="switcher-content"> 
            <form id="search_mini_form" action="https://www.redable.nl/catalogsearch/result/" method="get"> 
    <div class="form-search"> 
     <input id="search" autofocus="autofocus" placeholder="Zoeken naar..." type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off"> 
     <button type="submit" title="Zoek" class="search-button"><span><span><i class="fa fa-search"></i></span></span></button> 
     <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div> 
    </div> 
</form> 
           </div> 
          </div> 
         </div> 

JQuery:

jQuery('.header-setting .overwrite-setting').click(function() { 
    jQuery('.setting-switcher .switcher-content').toggle(); 
    jQuery(this).toggleClass('active'); 
    return false; 
}) 
if(jQuery(window).width() > 1024){ 
jQuery('.header-maincart .icon-cart-header').click(function() { 
    jQuery('.header-maincart .cart-wrapper').toggle(); 
    jQuery(this).toggleClass('active'); 
    return false; 
}) 
} 
jQuery('.header-search .overwrite-setting').click(function() { 
    jQuery('.search-container .switcher-content').toggle(); 
    jQuery(this).toggleClass('active'); 
    return false; 
}) 

jQuery(document).mouseup(function (e) 
{ 
    if(jQuery(window).width() > 1024){ 
     if(jQuery('.header-maincart').has(e.target).length == 0 && jQuery('.cart-wrapper').has(e.target).length == 0){ 
      jQuery('.header-maincart .cart-wrapper').hide(); 
      jQuery('.header-maincart .icon-cart-header').removeClass('active'); 
     } 
    } 
    if(jQuery('.header-search .overwrite-setting').has(e.target).length == 0 && jQuery('.search-container .switcher-content').has(e.target).length == 0){ 
     jQuery('.search-container .switcher-content').hide(); 
     jQuery('.header-search .overwrite-setting').removeClass('active'); 
    } 
    if(jQuery('.header-setting .overwrite-setting').has(e.target).length == 0 && jQuery('.setting-switcher .switcher-content').has(e.target).length == 0){ 
     jQuery('.setting-switcher .switcher-content').hide(); 
     jQuery('.header-setting .overwrite-setting').removeClass('active'); 
    } 


}); 

Answer 1

Не знаете, как скрыть/показать input, но вы можете использовать функцию focus на элемент после того, как вы покажете его:

$('button').click(function() { 
 
    $('#search').toggle().focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="search" autofocus="autofocus" placeholder="Zoeken naar..." type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off"> 
 
<button>Click to hide/show the button</button>