Question

我试图检查表单是否失焦，因此我可以相应地操作DOM。

我尝试过这样的事情：

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

因为focusout绑定到所有子元素，所以即使我在表单中的元素之间移动焦点，此事件也会触发。问题是，长度总是返回0所以......显然这是错误的。

这个主题是否有最佳实践？

编辑：（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>

Answer 1

您可以将所选对象与document.activeElement进行比较，其中包含具有焦点的当前元素。但请注意，它只能包含能够击键的元素，如输入元素等。

Answer 2

focusout事件会在表单中的元素失去焦点但在新元素收到焦点之前触发，因此您必须将回调延迟一次以提供activeElement财产时间更新

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

FIDDLE

如何检查表单是否失焦

2 个答案: