Finding the last focused element

Question

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:

<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 currently has focus, even if said element is not present upon original page load.

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?

Answer 1

document.activeElement is what you want. It's part of HTML5 and supported by all modern browsers, including IE.

Answer 2

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:

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

Answer 3

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).

Answer 4

In the end, it was an error in code elsewhere that was confusing the DOM about who had focus.

The line was this: $('#item-add').find('input.item').focus();

And it needed to be this: $('#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 not cumulative. 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.net and jsbin.com are awesome.
• Holy HTML5, document.activeElement is good to know.

Thanks so much, SO, for all your help on this issue.

Answer 5

You can use the :last selector to only handle the event on the last <input> in the document (last at the time that the event was fired)

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