寻找最后一个聚焦元素

Question

我想确定一系列动态添加的输入框中，最后一个获取焦点的元素。这段代码只能获取页面加载时就存在的输入框：

$('input.item').focus(function(){
    $(this).siblings('ul').slideDown();
});

这段代码可以查看所有曾经获得过焦点的元素：

$('input.item').live('focus', function(){
    $(this).siblings('ul').slideDown();
});

HTML的结构如下：

<ul>
    <li><input class="item" name="goals[]">
    <ul>
        <li>long list here</li>
        <li>long list here</li>
        <li>long list here</li>
    </ul></li>
</ul>
<a href="#" id="add">Add another</a>

页面加载时，只有一个输入框。每次添加新的输入框时，都会创建并附加一个新的无序列表的副本，并将焦点设置在新的输入框上。当每个输入框获得焦点时，我希望显示其下方的列表。但是我似乎无法“监视最近聚焦的元素，无论该元素现在还是将来存在”。

澄清一下：我不是在寻找DOM树中最后出现的元素。我要找到当前具有焦点的元素，即使该元素在原始页面加载时不存在。

这张图片 http://droplr.com/174l8H+

因此，在上面的图像中，如果我将焦点放在第二个元素上，则单词列表应显示在第二个元素下方。 我的焦点当前位于最后一个元素上，因此单词显示在那里。

我是否有某种基本的错误假设？

- Joshua Cody

---

这句话是什么意思？“而且这段代码可以看到所有曾经获得焦点的元素：”听起来像是你只想让菜单出现在任何获得焦点的input下面。是这样吗？ - user113716

没错，Patrick。但是.live会在所有曾经获得焦点的输入上执行该函数。它会检测元素是否有焦点，然后存储它。当你再次操作焦点时，它会作用于当前聚焦的元素和先前聚焦的元素，因为它已被.live观察到。请参见James Kolpack提到的注意事项。 - Joshua Cody

你使用的是哪个版本的jQuery？当隐藏和显示兄弟元素时，live() 对我来说很有效。一个input上的事件不应该影响其他元素。无论它们何时被加载都不应该有影响。 - user113716

Answer 1

document.activeElement 是您想要的。它是HTML5的一部分，并受到所有现代浏览器的支持，包括IE。

- Eli Grey

---

实际上，并不是所有的浏览器都支持它（如Firefox 2）。 - machineghost

忘记“现代”部分吧。如今Firefox 2的使用率非常低，所以不用担心它。 - Eli Grey

Answer 2

根据文档（请参见“注意事项”），jQuery 1.4.1中的.live()支持focus，映射到focusin。我建议在公共范围内创建一个元素来保存上次聚焦的元素。可能像这样：

var lastFocused;
$('input.item').live('focusin', function(){
    lastFocused = $(this);
});

- James Kolpack

---

尝试这个并努力解决一些问题；到目前为止，很有希望 :) - Joshua Cody

不幸的是，它仍然捕获了所有已经聚焦的元素。并在单击另一个项目的链接时使它们全部显示:/ - Joshua Cody

Answer 3

如何确定哪个HTML页面元素具有焦点？

使用document.activeElement可以解决大多数浏览器的问题，但为了使不支持它的浏览器工作，您需要添加来自该问题答案的JavaScript代码。

- machineghost

Answer 4

最后，问题出在其他代码中的错误，这让DOM混淆了谁拥有焦点。

这一行是：$('#item-add').find('input.item').focus();

需要改成：$('#item-add:last').find('input.item').focus();

因为添加的项目总是在列表的最后一个。

我们学到了很多东西，并尝试着开始并投票。特别值得注意的是：

.live事件不会累积。只有代码垃圾会。

在函数外设置一个变量，并在函数内更新它，以便您也可以在其他函数中访问它。 jsfiddle.net和jsbin.com非常棒。

天啊，document.activeElement很好知道。

非常感谢SO在这个问题上提供的所有帮助。

- Joshua Cody

Answer 5

您可以使用:last选择器来仅在文档中的最后一个<input>上处理事件（在触发事件时为最后一个）。

$('input.item:last').live('focus', function(){
    $(this).siblings('ul').slideDown();
});

- SLaks

---

这没有任何意义。在任何时候，事件刚刚触发的元素是最近拥有焦点的元素。 - SLaks

SLaks，我在这里添加了一张图片以显示我的问题。问题是如果我使用你的代码，它会不断监视DOM树中的最后一个元素。但是如果你点击之前的元素，它仍然在处理input.item的最后一个出现 -- 这是否更加清晰了？ - Joshua Cody

你是在问是否要隐藏其他的<ul>吗？ - SLaks

@Joshua - 我也不理解，你所描述的似乎是你问题中第二个代码块已经实现了的功能... - Nick Craver

@Joshua - 有什么不同的地方，可以找出这个例子：http://jsfiddle.net/xhFga/ :) - Nick Craver