How to Check if form is out of focus

Question

I'm trying to check if a form is out of focus, so I could manipulate the DOM accordingly.

I've tried something like this:

$("#dialog-form").on("focusout", function () {       
    if ($(document.activeElement).parents('#dialog-form').length === 0) {
        //Do some stuff...
    };
});

Because focusout binds to all the children elements, this event will fire even when I move the focus between elements in the form. Problem is, length always returns 0 so... obviously this is wrong.

Is there a best practice on the subject?

Edit: (cshtml)

@model IEnumerable<TasksWebApp.Task>
<h2>Tasks Managment Tool</h2>
<hr />
<br />
<ul id="MainUL">
    @{foreach (var item in Model)
      {
        <li id="li_@item.Name">
            <div class="taskContainer">
                @if (item.SubTasks.Count > 0)
                {
                    <div class="expand">
                        <button>Expand</button>
                    </div>
                }
                <div class="erase">
                    <button>Erase Task</button>
                </div>
                <div class="addSubClass">
                    <button>Add Sub-Class</button>
                </div>
                <div class="taskDetails">
                    Name: <span>@item.Name</span>&nbsp;
                    Owner: <span>@item.Owner</span>

                </div>
            </div>
            <ul></ul>
        </li>
        
      }
    }
</ul>

<div id="AddMainItem">
    <button>Add Main Item</button>
</div>

<div id="dialog-form" title="Create New Task">
    <p class="formHeadPar">All form fields are required:</p>
    <p id="FormComments"></p>
    <form id="AddTaskForm">

        <label for="newTaskName">Name:</label>
        <input type="text" name="newTaskName" id="newTaskName" placeholder="Task Name" />
        <label for="newTaskOwner">Owner:</label>
        <input type="text" name="newTaskOwner" id="newTaskOwner" placeholder="Task Owner" />

        <input type="submit" tabindex="1" value="Add Task" />
        <button id="CloseForm">Close Form</button>

    </form>
</div>

possible duplicate of [How do I find out which DOM element has the focus?](http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus) — L0j1k, Jan 24 '15 at 18:50

score 1 · Answer 1 · answered Jan 24 '15 at 18:48

1

You can compare the selected object with document.activeElement, which contains the current element with focus. But be aware that it only can contain elements capable of keystrokes, like input elements and such.

answered Jan 24 '15 at 18:48

cheetonme

11
2

score 1 · Answer 2 · answered Jan 24 '15 at 19:13

The focusout event bubbles, and fires when an element inside the form loses focus, but before a new elements receives the focus, so you have to defer the callback with a timeout to give the activeElement property time to update

$("#dialog-form *").on("focusout", function () {
    setTimeout(function() {
        if ( $(document.activeElement).closest('#dialog-form').length === 0 ) {
            //Do some stuff...
        };
    }.bind(this)); 
});

FIDDLE

How to Check if form is out of focus

2 Answers2