切换焦点以跟随toggleClass

Question

我在搜索表单上做一个简单的显示/隐藏，使用jQuery的toggleClass()和CSS来显示和隐藏表单。这很容易，就像：

$('#site-search-toggle').click(function(e){
    $('#site-search').toggleClass('search-open');
    e.preventDefault()
});

我想要做的，但很难弄清楚的是，当表单显示时，将焦点放在搜索输入上，当表单隐藏时，将焦点从搜索输入中移除。

添加焦点很容易：

$('#site-search-toggle').click(function(e){
    $('#site-search').toggleClass('search-open');
    $('#site-search input[type="search"]').focus();
    e.preventDefault()
});

但是，当再次单击$('#site-search-toggle')以隐藏表单时，我不得不解决如何删除它的问题。

Answer 1

好的，我想出了这个问题，或者至少我找到了一种方法来做我需要做的事情。我添加了第二个类search-closed，切换了两个类，然后使用每个类来聚焦或模糊字段，如下所示：

$('#site-search').addClass('search-closed');

$('.site-search__toggle').click(function(e){
    // toggle both classes
    $('#site-search').toggleClass('search-open search-closed');

    // set focus when form is visible, .search-open
    // use setTimeout to make sure the cursor actually gets in there
    // don't know why, but it works
    setTimeout (function(){
        $('#site-search.search-open .site-search__input').focus();
    }, 20);

    // blur when the form is not visible, .search-closed
    $('#site-search.search-closed .site-search__input').blur();

});

Answer 2

刚找到这条线，因为我已经把头撞到这个问题上了。

我找到了一种非常简单的方法来完成这个任务，基本上您所需要做的就是提供一个单击处理程序。单击元素时，您可以切换控制“焦点”状态的类，但也可以通过编程将元素聚焦：

document.getElementById('myelement').addEventListener('click', function() {
    this.classList.toggle('focus'); // or whatever...
    this.focus();
});

您需要给元素某种类型的“tabindex”值，可能是0或-1。

然后，您提供了一个“模糊”处理程序，当用户导航离开元素时，它只会移除“焦点”类。

document.getElementById('myelement').addEventListener('blur', function() {
    this.classList.remove('focus');
    return false;
});

像做梦一样工作！

很抱歉，这不是一个jQuery的答案，但它应该很容易适应-我只是不使用它.

丹尼

Answer 3

试试这个：

$('#site-search-toggle').click(function(e){
$('#site-search').toggleClass('search-open');
if ($('#site-search').hasClass('search-open')) {
    $('#site-search input[type="search"]').focus();
} else {
    $('#site-search input[type="search"]').blur();
}
e.preventDefault();
});