如何在 JavaScript 中清除焦点？

Question

我知道这应该不难，但是我在谷歌上找不到答案。

我想要执行一段JavaScript代码，可以将焦点从当前元素上清除，而不需要预先知道焦点所在的元素。它必须能够在Firefox 2以及现代浏览器上运行。

有什么好的方法可以做到这一点吗？

- Andres

---

清晰聚焦是什么意思？ - 它和模糊是一样的吗？ - plodder

我希望让浏览器中的任何元素都没有焦点。 - Andres

Answer 1

答案: document.activeElement

要实现您想要的效果，请使用 document.activeElement.blur()

如果需要支持 Firefox 2，您也可以使用以下方法:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

- jps

---

如果Firefox 2，仅占0.66％的浏览器份额，是制约因素...我有一个解决方法，已经在我的编辑答案中。 - jps

2013年，Firefox 2的浏览器份额远低于0.66%，使用简单的 document.activeElement.blur() 是实现此效果的最佳方法。 - chowey

我得到了以下错误信息：属性“blur”在类型“Element”上不存在。ts（2339） - YTG

@YTG 请查看我对这个问题发布的答案，其中解决了这个问题。 - Wilco Brouwer

document.activeElement 是一个只读属性。你不能给它赋任何值。 - Jakub Kurdziel

Answer 2

.focus() 然后在页面上选择其他任意元素进行 .blur()。由于只能有一个元素拥有焦点，因此焦点会转移到该元素，然后被移除。

- Kevin Reid

---

有没有办法创建一个具有焦点的不可见元素？ - Andres

我不是最擅长处理这个问题的专家；但你可以将其定位到屏幕外或超出 overflow: clip 样式元素的边界之外。但你也可以使用页面上已经存在的字段。或者为此创建一个字段，然后再将其删除。 - Kevin Reid

我认为将焦点设置到屏幕外的元素会强制滚动到该元素。但是，您可以为此创建一个不可见的元素。话虽如此，某些浏览器可能很难删除插入符号。只需使用blur()可能效果更好。您仍然可以通过keyup（keydown）事件处理程序获取键。 - Alexis Wilke

这个答案已经过时，不适用于2017年。请使用activeElement，例如https://dev59.com/y3E85IYBdhLWcg3w9orw#2520670。 - Paul Fisher

它仍然可以工作，只是时间更长并移动焦点（可能会干扰TAB导航）另外，“something else arbitrary”应该是什么并不立即显而易见。 - user202729

不要这样做。一些屏幕阅读器会跟随键盘焦点，并朗读焦点的变化。 - Corey

Answer 3

document.activeElement.blur();

在IE9上运行错误 - 如果活动元素是文档主体，则会模糊整个浏览器窗口。最好检查此情况：

if (document.activeElement != document.body) document.activeElement.blur();

- pwnzor1337

---

我得到了属性'blur'在类型'Element'上不存在。ts(2339)的错误提示。 - YTG

你需要将其转换为HTMLElement。 - unknown_boundaries

尽管IE9已经被淘汰，但它所做的事情实际上是有些明智的，支持这种行为似乎是一个好主意，如果其他浏览器决定实现这种行为的话。哪怕Chrome明天就可以为这种行为实现一个标志。 - Devin Rhode

Answer 4

在使用TypeScript时，这里提供的所有答案都不完全正确，因为您可能不知道所选元素的类型。

因此，以下代码是更好的选择：

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

此外，我建议不要使用被接受答案中提供的解决方案，因为生成的模糊效果不是官方规范的一部分，可能会在任何时候停止支持。

- Wilco Brouwer

---

使用较新的 as 类型转换，可以得到类似的解决方案：(document.activeElement as HTMLElement).blur()。 - Tim

我更喜欢 document.activeElement?.blur && document.activeElement.blur()。 - foobored

“as”并不能确保元素是HTMLElement。它只是满足类型检查器的要求。如果“blur”未定义，它将会崩溃。 - Raine Revere

Answer 5

如果您使用TypeScript，请使用

(document.activeElement as HTMLElement).blur();

这可以确保元素的类型是 HTMLElement

- m_j_alkarkhi

---

这并不保证该元素是HTMLElement。它只是满足类型检查器。将其包装在if(document.activeElement instanceof HTMLElement)中，以避免在非HTML DOM节点上崩溃。 - Raine Revere

Answer 6

我更喜欢使用document.activeElement?.blur && document.activeElement.blur()。

我正在使用vue和react：在我的情况下，我可以在组件之间的任何地方调用它，它将取消焦点。

- T.Woody

---

这个也会报错。'blur' 在 Element 上不存在。所以没有 instanceof 的版本的 Element.blur 类型保护。document.activeElement && "blur" in document.activeElement && document.activeElement.blur && typeof document.activeElement.blur === "function" && document.activeElement.blur(); - undefined

Answer 7

dummyElem.focus()是指在一个隐藏对象（例如，具有负zIndex值）上设置焦点吗？

- plodder

Answer 8

你可以调用window.focus();

但是移动或失去焦点必定会干扰使用Tab键浏览页面的用户。

你可以监听按键码13，如果按下Tab键则放弃效果。

- kennebec

Answer 9

使用jQuery只需要这样：$(this).blur();

- bsbak

---

这是一个旧答案，你可能已经知道了，但有两个原因导致此答案不适用。1. 它假设 OP 在使用 jQuery，2. this 需要是具有焦点的元素，而问题明确指出 OP 事先不知道具有焦点的元素。 - Brandon