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

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

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

Есть ли способ добиться этого с помощью 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');
    }


});

html jquery autofocus
person JGeer    schedule 03.11.2016    source источник
comment
Как именно вы скрываете/отображаете ввод?   -  person Dekel    schedule 03.11.2016
comment
Я думаю, вы должны вызвать .focus() после скрытия и отображения.   -  person hisener    schedule 03.11.2016
comment
@Декель Спасибо! Я обновил свой вопрос.   -  person JGeer    schedule 03.11.2016
comment
Отлично, вы проверили мой ответ? :)   -  person Dekel    schedule 03.11.2016
comment
@Dekel Да, спасибо! Я проверил это. Но в моем случае это происходит при нажатии на настройку .search-container .overwrite. Как я могу этого добиться?   -  person JGeer    schedule 03.11.2016
comment
всякий раз, когда вы показываете элемент (или контейнер), просто добавляйте $('#search').focus(), как вы можете видеть в моем примере.   -  person Dekel    schedule 03.11.2016
comment
@Декель Спасибо! Я пробовал это, но, похоже, это не работает. Что мне не хватает? jQuery('.header-search .overwrite-setting').click(function() { jQuery('.search-container .switcher-content').toggle(); jQuery(this).toggleClass('active'); return false; jQuery('#search').focus(); })   -  person JGeer    schedule 03.11.2016
comment
вы должны поставить его перед return false; :)   -  person Dekel    schedule 03.11.2016
comment
@Dekel, спасибо, это было довольно круто, работает отлично! :)   -  person JGeer    schedule 03.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Не знаю, как скрыть/показать 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>

person Dekel    schedule 03.11.2016