Question

当用户点击网站上的搜索（放大镜）图标时，搜索栏会向下滑入视图。搜索栏向下滑动后，我希望光标在搜索栏内开始闪烁，这样用户就可以立即开始输入。但我无法将光标移动到搜索栏中。我已经尝试了一切我能想到的东西让它发挥作用！

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);
            }
        });
    });
});

Answer 2

＆＃13;

$('#search-box').on('focus', function(event){
  var searchQuery = $('#search-box').val();
  console.log(searchQuery);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='search-box' type='text'/>

＆＃13;

jQuery focus（）不起作用

2 个答案: