3

SOに同様のトピックが投稿されているのを見たことがありますが、私のものは少し異なります。divの外に焦点を合わせるまで、親のDIV（および子）に焦点を合わせ続けようとしていますが、驚くほど達成するのは難しいようです。

このソリューションは機能すると思いましたが、実際のdiv自体ではなく、兄弟要素にのみ適用されるようです。

これが私がやろうとしていることのデモですhttp://jsfiddle.net/nosfan1019/9Eg3k/3/。灰色の部分をクリックして消えないようにするために必要です。

4

2 に答える 2

3

さて、私はこれがあなたが望むものだと思います：

デモ： 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>

おそらくもっと効率的かもしれませんが、うまくいくようです。

于 2012-07-11T02:26:03.080 に答える
1

これは、他の答えよりも少し文字通りのアプローチですが、完全を期すためには、もう1つ、オートフォーカスをに戻すことが適切であるように思われます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/

于 2012-07-11T04:10:36.370 に答える