1

フォーム内のすべてのテキスト ボックスにフローティング コントロールをアタッチするコードがあります。それを示すためにフィドルを作成しましたが、コードは基本的に次のとおりです。

#box{
    position: absolute;
    padding: 20px;
}

var $box = $('<div id="box"><input type="button" value="Click Me"></div>').hide().appendTo("#main-form");
$("#main-form").on("focus", ":text, textarea", function(){
    $text = $(this);
    $box.show().position({
        my: "right top",
        at: "left top",
        of: $text
    });
});

ユーザーが (マウスまたはキーボードを使用して) テキストエリアに入ると、テキストエリアの横にコントロール ボックスが表示されます。ここまでは順調ですね。

私の問題は、ボックスが不要になったとき (つまり、ユーザーがテキストエリアから離れたとき) にボックスを非表示にするための適切なアルゴリズムを見つけられないことです。明らかなアプローチは適切ではありません。

$("#main-form").on("blur", ":text, textarea", function(){
    $box.hide();
});

... コントロール ボックスの使用が許可されていないため、ユーザーがボタンをクリックしようとするとすぐに非表示になります。

私は現在、この行で何かをしようとしています:

$("#main-form").on("blur", ":text, textarea", function(){
    if( $box.is(":focus") ){ // :-?
        $box.hide();
    }
});

...しかし、フォーカスがコントロールボックスに移動したかどうかを検出できません。何か案が？

編集：jQuery APIドキュメントには次のように書かれています：

現在フォーカスされている要素を探している場合、$( document.activeElement )DOM ツリー全体を検索せずに取得します。

...しかし、私のテストでは、常に<body>ノードです:-?

4

1 に答える 1

3

ドキュメントで + クリック イベントを行っているように、blur をリッスンすることで、この動作を実現できます。

// Hide the $box if clicked anywhere outside of it
$(document).on('click', function(e) {
    if (!$box.data('over')) {
        $box.hide();
    } 
});

// Set a flag if $box is currently hovered
$box.on({
    mouseenter: function() {
        $(this).data('over', true);
    },
    mouseleave: function() {
        $(this).data('over', false);
    }
});

http://jsfiddle.net/g96nr/1/

于 2013-03-20T11:31:32.063 に答える