Question

我想在页面右侧的http://www.chess24.com/做一个小搜索框。

这是我对HTML的和平：

<div class="input-group" id="searchBox">
    <input name="data[Search]" class="form-control" id="searchText" style="display : none; width : 0;" type="text"/>
    <button class="btn btn-default" type="button" id="searchBtn">Go!</button>
</div>

和Jquery代码是：

    $( document ).ready(function() {
    $('#searchBtn').on('mouseenter',function(){
        $('#searchText').show();
        $('#searchText').animate({width: '200px'}, 500, function() {$('#searchText').focus();
        });
    });
    $('#searchText').blur(function() {
        if (!($('#searchBtn').is(":active")) && !($('#searchText').is(":active")) )
            $('#searchText').animate({width: '0'}, 500, function() {$(this).hide();});
        console.log($(document.activeElement));
    });


});

问题是当焦点转到按钮或单击TextBox将关闭的按钮时。当我指出这两个元素时，我想要关闭它。

Answer 1

$(document).on('click', function(event) {
   var idx = event.target.id;
   //if clicked element is not searchText or searchbtn, but searchtext is visible
   if (idx !== 'searchText' && idx !== 'searchBtn' && $('#searchText').is(":visible")){
     $('#searchText').animate({width: '0'}, 500, function() {$(this).hide();});
   }
});

有几种方法可以解决这个问题。只是一个提示。

如何使用Jquery正确找到焦点？

1 个答案: