在表单提交之前了解焦点元素 id

Question

我想在 ajax 检查后将焦点返回到 html 元素（触发表单的提交）。因为我的表单总是被提交，最后一个焦点元素始终是提交按钮。

我怎样才能知道之前获得焦点的元素（请用纯JS）？

提前致谢

Answer 1

要在 AJAX 检查后将焦点返回到触发表单提交的 HTML 元素，您可以使用 JavaScript 中的

focus()

方法。您可以在 AJAX 调用之前将先前具有焦点的元素存储在变量中，然后在 AJAX 调用之后使用它将焦点设置回该元素。

示例：

// Store the previously focused element
let previousElement = document.activeElement;

// Perform AJAX call
$.ajax({
  url: "your-url",
  success: function() {
    // Set focus back to the previously focused element
    previousElement.focus();
  }
});

要在纯 JavaScript 中获取先前聚焦的元素，可以使用

document.activeElement

属性。此属性返回文档中当前聚焦的元素。您可以在 AJAX 调用之前将此值存储在变量中，然后在 AJAX 调用之后使用它将焦点设置回该元素。

// Store the previously focused element
let previousElement = document.activeElement;

// Perform AJAX call
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Set focus back to the previously focused element
    previousElement.focus();
  }
};
xhr.open("GET", "your-url", true);
xhr.send();