Henk Z Henk Z - 1 month ago 7
HTML Question

autofocus attribute not working on display state change

I want to add autofocus to a form. That is working fine, but for the search form I also use a display status change, from none to block and back again.

The first time the autofocus works fine, but after hiding the form and displaying it again, the autofocus does not work anymore.

Is there a way to achieve this by jQuery? And what code do I need?

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

Not sure how you hide/show the input, but you can use the focus function on the element after you show it:

$('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>