使用 JavaScript 从元素中移除焦点

Remove the focus from an Element using JavaScript

使用该blur()方法从元素中移除焦点，例如
input.blur(). 如果您需要在不选择它的情况下从当前活动元素中移除焦点，请调用
属性 –blur上的方法。activeElementdocument.activeElement.blur()

以下是本文示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" autofocus />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const input = document.getElementById('first_name');

// ✅ Remove focus from specific element
input.blur();

// ✅ Remove focus from currently active element
// document.activeElement.blur();

我们input使用方法选择了元素document.getElementById()。

我们使用
HTMLElement.blur()
方法从元素中移除焦点。

The blur() method removes the keyboard focus from the element it was called on.

If you want to remove the focus from the currently active element without
selecting it, call the blur() method on the document.activeElement
property.

index.js


// ✅ Remove focus from currently active element
document.activeElement.blur();

The
document.activeElement
property returns the element that currently has focus.

If there is no focused element, the document.activeElement property will return the body element in most browsers, but it could also return null depending on the browser’s implementation.

To avoid getting an error due to calling the blur() method on a null value,
use the optional chaining (?.) operator.

index.js


document.activeElement?.blur();

如果document.activeElement属性返回null，可选的链接运算符将短路返回而不是调用方法。 undefinedblur()

如果您需要关注不同的元素，您可以使用该focus()方法。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" autofocus />

    <input type="text" id="country" placeholder="Country" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const countryInput = document.getElementById('country');

countryInput.focus();

即使带有of的input元素具有属性集，我们也可以通过在不同元素上调用该方法
来更改焦点
元素。idfirst_nameautofocusfocus()

–