Javascript 找到最后一个焦点元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2954295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding the last focused element
提问by Joshua Cody
I'm looking to determine which element had the last focus in a series of inputs, that are added dynamically by the user. This code can only get the inputs that are available on page load:
我正在寻找确定哪个元素在一系列输入中具有最后一个焦点，这些输入是由用户动态添加的。此代码只能获取页面加载时可用的输入：
$('input.item').focus(function(){
$(this).siblings('ul').slideDown();
});
And this code sees all elements that have ever had focus:
这段代码看到了所有曾经有过焦点的元素：
$('input.item').live('focus', function(){
$(this).siblings('ul').slideDown();
});
The HTML structure is this:
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>
On page load, a single input loads. Then with each add another, a new copy of the top unordered list's contents are made and appended, and the new input gets focus. When each gets focus, I'd like to show the list beneath it. But I don't seem to be able to "watch for the most recently focused element, which exists now or in the future."
在页面加载时，加载单个输入。然后随着每个添加另一个，创建并附加顶部无序列表内容的新副本，并且新输入获得焦点。当每个人都获得关注时，我想在其下方显示列表。但是我似乎无法“观察最近关注的元素，它现在或将来存在。”
To clarify:I'm not looking for the last occurrence of an element in the DOM tree. I'm looking to find the element that currentlyhas focus, even if said element is not present upon original page load.
澄清一下：我不是在寻找 DOM 树中元素的最后一次出现。我正在寻找当前具有焦点的元素，即使该元素在原始页面加载时不存在。
this image http://droplr.com/174l8H+
So in the above image, if I were to focus on the second element, the list of words should appear under the second element. My focus is currently on the last element, so the words are displayed there.
所以在上图中，如果我要关注第二个元素，单词列表应该出现在第二个元素下。我的焦点目前在最后一个元素上，所以单词显示在那里。
Do I have some sort of fundamental assumption wrong?
我是否有某种基本假设错误？
采纳答案by Joshua Cody
In the end, it was an error in code elsewhere that was confusing the DOM about who had focus.
最后，是其他地方的代码中的错误使 DOM 混淆了谁拥有焦点。
The line was this: $('#item-add').find('input.item').focus();
这条线是这样的： $('#item-add').find('input.item').focus();
And it needed to be this: $('#item-add:last').find('input.item').focus();
它必须是这样的： $('#item-add:last').find('input.item').focus();
Because the added item is always last in the list.
因为添加的项目总是在列表的最后。
Much has been learned, and I've tried to start and upvote accordingly. Particularly of note to the question at large:
学到了很多东西，我已经尝试开始并相应地投票。特别值得注意的是整个问题：
- .live events are notcumulative. Only code cruft is.
- Set a variable outside of your function and update it within your function so you can access it in other functions as well.
- jsfiddle.netand jsbin.comare awesome.
- Holy HTML5, document.activeElementis good to know.
- .live 事件不是累积的。只有代码杂乱。
- 在函数外设置一个变量并在函数内更新它，以便您也可以在其他函数中访问它。
- jsfiddle.net和jsbin.com很棒。
- 神圣的 HTML5，document.activeElement很高兴知道。
Thanks so much, SO, for all your help on this issue.
非常感谢您对这个问题的所有帮助。
回答by James Kolpack
According to the documentation(see 'caveats'), .live()in jQuery 1.4.1 supports focus, mapping to focusin. I'd suggest creating an element in common scope to hold the last focused element. Perhaps like so:
根据文档（参见“注意事项”），.live()在 jQuery 1.4.1 中支持focus, 映射到focusin. 我建议在公共范围内创建一个元素来保存最后一个焦点元素。也许像这样：
var lastFocused;
$('input.item').live('focusin', function(){
lastFocused = $(this);
});
回答by Eli Grey
document.activeElementis what you want. It's part of HTML5 and supported by all modern browsers, including IE.
document.activeElement是你想要的。它是 HTML5 的一部分，所有现代浏览器都支持，包括 IE。
回答by machineghost
How to determine which html page element has focus?
Has your answer (using document.activeElement gets you there for many browsers, but to make the ones that don't support it work you'll want to add the Javascript from that question's answer).
有你的答案（使用 document.activeElement 可以让你在许多浏览器中找到它，但要使那些不支持它的浏览器工作，你需要从该问题的答案中添加 Javascript）。
回答by SLaks
You can use the :lastselector to only handle the event on the last <input>in the document (last at the time that the event was fired)
您可以使用:last选择器仅处理<input>文档中最后一个事件（事件被触发时的最后一个）
$('input.item:last').live('focus', function(){
$(this).siblings('ul').slideDown();
});
