Question

我在SO上发布了类似的主题，但我的情况略有不同。我试图让我的父DIV（和孩子们）保持专注，直到我把注意力集中在div之外，而且看起来很难完成。

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

以下是我正在尝试http://jsfiddle.net/nosfan1019/9Eg3k/3/的演示。我需要它，所以你可以点击灰色部分而不是消失。

Answer 1

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

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

        });            

   });

});

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

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/

保持<div>及其子节点的焦点，直到焦点离开<div> </div> </div>

2 个答案: