javascript - jQuery focus() 不起作用

Question

当用户单击网站上的搜索(放大镜)图标时，搜索栏会向下滑动进入 View 。搜索栏向下滑动后，我希望光标在搜索栏中开始闪烁，以便用户可以立即开始输入。但我无法让光标移至搜索栏。我已经尝试了一切我能想到的让它发挥作用!

The website (search icon is in the header)

jQuery 代码:

jQuery(document).ready(function() {
    //show/hide search bar on icon click
    jQuery('#search-icon').click(function(e) {
        e.preventDefault();
        jQuery('#mobile-nav').css('display','none');
        jQuery('#search-box').slideToggle('fast',function() {
            if (jQuery('#search-box').css('display') == 'block') {
                window.setTimeout(function() {
                    jQuery('#search-box').focus().val(jQuery('#search-box').val());
                }, 0);
            }
        });
    });
});

Answer 1

我更改了选择器 ID，它按照您的要求工作。查看下面的代码。

jQuery(document).ready(function() {
    //show/hide search bar on icon click
    jQuery('#search-icon').click(function(e) {
        e.preventDefault();
        jQuery('#mobile-nav').css('display','none');
        jQuery('#search-box').slideToggle('fast',function() {
            if (jQuery('#search-box').css('display') == 'block') {
                window.setTimeout(function() {
                    jQuery('#search-bar').focus().val(jQuery('#search-bar').val());  // changed selector to "search-bar". 
                }, 0);
            }
        });
    });
});