将焦点重新应用于替换的 DOM 元素

Posted 2023-05-09

【中文标题】将焦点重新应用于替换的 DOM 元素

【英文标题】：Reapplying focus to a replaced DOM element

【发布时间】：2013-04-10 12:25:39

【问题描述】：

在我的应用程序中，许多 DOM 元素使用 jquery-ujs。这在大多数情况下都很好。

有时，我有一个表单元素在获得焦点时被替换。我希望能够为用户保持焦点。

我尝试了以下方法，但问题是 jquery 似乎将新节点视为完全一样，而不是它正在替换的节点的精确副本：

$(document).on('ajax:beforeSend',function()
    window.focussed = $("*:focus");
);
$(document).on('ajax:complete',function()
    window.focussed.focus();
);

理想情况下，我可以在不添加标记的情况下实现这一点。

【问题讨论】：

不知道您的 html 是什么，因此无法提供完整的解决方案，但是要删除的元素是否具有名称或其他可用于选择它的属性？您可以存储 选择器 并使用它重新查找带有$(selector).focus() 的元素。或者使用被替换元素的索引使用.eq()

重新找到它

如前所述，如果可以的话，我想将此功能与标记分离

与标记的耦合不会比已经存在的多。我只是想问是否有另一种方法来存储对焦点元素的引用，无论是通过 DOM 路径还是其他属性。如果您将 HTML 添加到问题中，我可能会提出更具体的建议

【参考方案1】：

如果元素被新节点替换，那么关注保存在 window.focussed 中的元素将不会做任何事情。如果他们有相同的 id，你可以这样做：

$(document).on('ajax:beforeSend',function()
    window.focusedId = $("*:focus").prop("id");
);
$(document).on('ajax:complete',function()
    $(window.focusedId).focus();
);

【讨论】：

我想知道是否有另一种方法可以从$("*:focus") 中存储的信息中推断出匹配，而不需要特定的属性。