jquery - 保持和它的孩子在焦点，直到焦点不在

Question

我在 SO 上看到过类似的主题，但我的略有不同。我试图让我的父母 DIV（和孩子）保持专注，直到我把注意力放在 div 之外，这似乎很难完成。

我认为这个解决方案会起作用，但它看起来只适用于兄弟元素而不是实际的 div 本身。

这是我正在尝试做的演示http://jsfiddle.net/nosfan1019/9Eg3k/3/。我需要它，这样您就可以单击灰色部分而不会让它消失。

Answer 1

好的，我认为这就是您想要的：

演示：http: //jsfiddle.net/SO_AMK/GNfzw/

HTML：

<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>

CSS：

div {
    margin: 20px;
    padding: 10px;
    outline: 0;
}

jQuery：

$(function() {
    $('div input').parent().attr("tabindex",-1).focus( function() {
        $(this).css('background','#eee');
        $(this).find('span').text(' triggered');

        $(this).focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','white');

        });            

   });
    $('div input').focus( function() {
        $(this).parent().css('background','#eee');
        $(this).siblings('span').text(' triggered');

        $(this).parent().focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','white');

        });            

   });

});

​</p>

它可能会更有效，但似乎有效。

Answer 2

与其他答案相比，这是一种更字面的方法，但为了完整性，它似乎又做了一件事：自动对焦回到input. 它可能很有用，尽管其他答案可能很简单。

$(function() {
    var $divs = $('div'),
        $entered = null;

    var on = function() {
        var $target = $(this);

        _off();

        $entered = $target.parent().addClass('on');
        $target.siblings('span').text(' triggered');
    };

    var focus = function(){
        $(this).find('input').focus();
    };

    var off = function() {
        if ($entered !== null && $(this).parent().is($entered)) {
            return;
        }

        _off();
    };

    var _off = function(){
        $divs.removeClass('on').children('span').text('');
    };

    var entered = function(e){
        if (e.type == 'mouseenter') {
            $entered = $(this);
        } else {
            $entered = null;
        }
    };

    $divs.find('input').focus(on).blur(off);

    $divs
        .attr('tabindex', -1)
        .bind('mouseenter mouseleave', entered)
        .bind('focus', focus);
});

http://jsfiddle.net/userdude/34HLU/2/