javascript - 切换焦点以跟随 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

刚刚发现这个线程，因为我已经为这个问题苦苦思索了一段时间。

我找到了一种非常简单的方法来执行此操作，基本上您需要做的就是提供一个点击处理程序。单击该元素时，您切换控制“聚焦”状态的类，但您也以编程方式聚焦该元素:

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 答案，但它应该很容易适应 - 我只是不使用它...

丹尼