Question

我在搜索表单上进行简单的显示/隐藏，该表单使用jQuery＆＃39; 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＆＃39;值，可能为0或-1。

然后，你提供了一个模糊的＆＃39;处理程序，只是删除了焦点＆＃39;用户导航离开元素时的类。

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

像梦一样工作！

对不起，这不是jQuery的答案，但应该很容易适应 - 我只是不使用它......

丹尼

Answer 2

好吧我想出了这个，或者至少我找到了办法去做我需要做的事情。我添加了第二个类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 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();
});

切换焦点以跟随toggleClass

3 个答案: