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树中最后一次出现的元素。我希望找到当前具有焦点的元素，即使原始页面加载时不存在所述元素。

this image http://droplr.com/174l8H+

所以在上面的图像中，如果我要关注第二个元素，那么单词列表应该出现在第二个元素下面。我的焦点目前是最后一个元素，所以在那里显示单词。

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

Answer 1

根据the documentation（请参阅'警告'），jQuery 1.4.1中的.live()支持focus，映射到focusin。我建议在共同范围内创建一个元素来保存最后一个聚焦元素。也许是这样：

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

Answer 2

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

Answer 3

How to determine which html page element has focus?

您的答案是否有问题（使用document.activeElement可以为许多浏览器提供帮助，但为了使那些不支持它的工作，您需要从该问题的答案中添加Javascript）。

Answer 4

最后，在其他地方的代码中出现了错误，这使得DOM关注谁有焦点。

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

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

因为添加的项目始终位于列表的最后。

我已经学到了很多东西，并且我已经尝试了相应的启动和提升。特别值得注意的问题是：

。活动不累积。只有代码残留。
在函数外部设置变量并在函数内更新它，以便您也可以在其他函数中访问它。
jsfiddle.net和jsbin.com非常棒。
神圣的HTML5，document.activeElement很高兴知道。

非常感谢，感谢你在这个问题上的所有帮助。

Answer 5

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

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

找到最后一个重点元素

5 个答案: