jquery - 设置 jQuery 焦点

Question

问题

我正在尝试实现一种效果，当用户将鼠标悬停在上面时会出现弹出窗口。然后焦点将设置在该弹出窗口上。当用户将焦点移出所述弹出窗口时，它就会消失。

示例

您可以查看下面的工作示例，但您需要在用户名和密码字段中以“testuser”身份登录。登录后将鼠标悬停在登录框上，会出现一个弹出窗口，告诉您已经登录。

http://www.steelfrog.com

我希望该弹出窗口在用户从其中移除焦点后淡出，因为它包含一个注销按钮。

目前...

到目前为止我所拥有的:

$('.disabled').hover (
    function () { $('#bubble_logged').fadeIn(300); },
    function() { $('#bubble_logged').focus(); }
    );

$('#bubble_logged').focusout ( function () { $('#bubble_logged').fadeOut(300); } );

显然，这是无效的，或者有些东西我没有正确理解。我对 jQuery 很陌生，所以启发会很棒!

[编辑]如果您有更好的方法，我会洗耳恭听!

Answer 1

您需要使用 native javascript focus() 方法。您不能直接在 jQuery 对象上使用它，因为该对象不仅仅引用 DOM 元素。

选择器$('#bubble_logged')将返回一个jQuery对象，其中包含ID为“bubble_logged”的所有项目。应该只有一个，但 jQuery 不在乎。因此，我们需要找到该集合中的第一个(也是唯一一个)项目。您可以使用 $('#bubble_logged').get(0) 或 $('#bubble_logged')[0] 来完成此操作。完成此操作后，您就获得了对要查找的 DOM 元素的引用。

因此，我们添加一个 .focus() 将焦点移动到该元素。 $('#bubble_logged').get(0).focus(); 请注意，这将尝试聚焦 #bubble_logged 元素。如果那是一个div，那就没什么作用了。如果您尝试将某个元素聚焦在该容器内，则需要对其调用 focus。

对于 .hover() jQuery 方法，您为其提供了两个匿名函数。第一个是hoverIn 事件处理程序，第二个是hoverOut 事件处理程序。我相信您希望弹出窗口淡入，然后设置焦点。为此，请将这两个逻辑 block 放入第一个事件处理程序中。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    ...
);

然后，当调用hoverOut方法时，您可能希望淡出弹出窗口。只需添加以下内容即可。

$('.disabled').hover (
    ...
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);

最终的脚本如下所示。

$('.disabled').hover (
    function () { 
        $('#bubble_logged').fadeIn(300, function(){
            //this is executed once the fadein is complete
            $('#bubble_logged')[0].focus();
        }); 
    },
    function () { 
        $('#bubble_logged').fadeOut(300);
    }
);