Question

（我第一次在这里发帖，希望这没关系！）

我目前有一个包含搜索字段的隐藏div，并且有一个向下滑动div以使其可见的按钮，再次单击时会滑动div以将其隐藏起来。

我还进行了设置，以便在单击按钮时选择搜索文本字段（这样访问者就不必单击它 - 他们只需键入并按Enter键进行搜索，保存更多点击次数）。

但是，当div消失时，将重新选择文本字段。这在Chrome上不是问题，但在Safari上，即使隐藏了div后，按Enter仍然有效并开始搜索（不过可以输入更多文本）。这也是移动设备上的一个问题，因为键盘被重新启动，尽管无处可打字。

有没有办法“切换”文本字段是否被选中，类似于外观/消失？或者只是在div出现时才发生，或许？我对jQuery很新，所以任何帮助都会受到赞赏。

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $('.search-menu').slideToggle("fast");
    });
});             
});

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $(".search-field").focus()
    });
});
});

（其中#showsearch是按钮，.search-menu是div，而.search-field是文本字段）

提前致谢！

Answer 1

您可以使用以下代码段：

jQuery(function ($) { //this is already fired on document ready, no need other ready handler
    $('#showsearch').click(function() {
        $('.search-menu').slideToggle("fast", function(){
            if($(this).is(':visible'))
               $(this).find(".search-field").focus(); //that supposes .search-field is wrapped inside .search-menu
        });
    });       
});

Answer 2

试试这个，移动safari上的虚拟键盘应该出现

jQuery(function ($) { 
    $('#showsearch').click(function() {
        var searchMenu = $('.search-menu'),
            isHidden = searchMenu.is(':hidden');

        searchMenu.slideToggle('fast');

        if (isHidden){
            $('.search-field').focus();
        }
    });       
});

jQuery：使用相同的按钮聚焦/关闭文本字段

2 个答案: