Javascript 切换焦点以跟随toggleClass

我正在一个搜索表单上做一个简单的显示/隐藏，它使用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').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();
});

---

好吧，我想出来了，或者至少我找到了一种方法来做我需要做的事情。我添加了第二个类，

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

});

---

刚刚发现了这条线，因为我一直在努力解决这个问题

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

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

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

然后，您提供了一个“blur”处理程序，当用户离开元素导航时，它只会删除“focus”类

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

像做梦一样工作

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

---

Danny

在其他地方设置焦点或使用

.blur（）

使元素失去焦点。@JonathanKuhn是对的。。如果.blur（）不起作用。。对任何其他对象使用触发器（“单击”）element@JonathanKuhnm但是，我如何将其与toggleClass行为同步，以便窗体显示字段是聚焦的，而隐藏字段时不聚焦？