如何检查表单是否失焦

How to Check if form is out of focus

本文关键字：表单 是否 检查 何检查      更新时间：2023-09-26

我正在尝试检查表单是否失焦，以便我可以相应地操作 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>

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

focusout 事件冒泡，并在窗体中的元素失去焦点时触发，但在新元素收到焦点之前，因此您必须延迟回调超时，以便activeElement属性有时间更新

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

小提琴

相关文章：