你如何清除javascript中的焦点？

Posted 2023-02-19

【中文标题】你如何清除javascript中的焦点？

【英文标题】：How do you clear the focus in javascript?

【发布时间】：2011-02-01 00:22:03

【问题描述】：

我知道这不应该那么难，但我在 Google 上找不到答案。

我想执行一段 javascript 来清除它所在的任何元素的焦点，而无需提前知道焦点在哪个元素上。它必须适用于 firefox 2 以及更现代的浏览器。

有什么好办法吗？

【问题讨论】：

清晰焦点是什么意思？ - 和blur一样吗？

我想让浏览器中的任何元素都没有焦点。

【参考方案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);

【讨论】：

如果浏览器份额为 0.66% 的 Firefox 2 是一个交易破坏者......我有一个修复程序，在我编辑的答案中。

2013年，Firefox 2的浏览器份额大幅低于0.66%，简单的document.activeElement.blur()是实现这一效果的最佳方式。

我得到以下信息：Property 'blur' does not exist on type 'Element'.ts(2339)

@YTG 查看我发布的这个问题的答案，它解决了这个问题。

document.activeElement 是只读属性。你不能给它分配任何东西

【参考方案2】：

.focus() 然后.blur() 在您的页面上出现其他任意内容。由于只有一个元素可以拥有焦点，因此将焦点转移到该元素，然后将其移除。

【讨论】：

有没有办法制作一个有焦点的不可见元素？

我不是最好的方法专家；但是您当然可以将其放置在屏幕外或overflow: clip 样式元素的范围之外。但是您可以只使用页面上已经存在的字段。或者仅为此目的创建一个并再次删除它。

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

此答案已过时，不适用于 2017 年。请改用 activeElement，如 ***.com/a/2520670/39808

它仍然有效，只是更长并且移动焦点（这可能会干扰 TAB 导航）此外，“其他任意东西”应该是什么也不是很明显。

【参考方案3】：

dummyElem.focus() 其中 dummyElem 是隐藏对象（例如具有负 zIndex）？

【参考方案4】：

你可以调用window.focus();

但移动或失去焦点势必会干扰使用 Tab 键浏览页面的任何人。

您可以监听 keycode 13，如果按下 tab 键则放弃效果。

【参考方案5】：

document.activeElement.blur();

在 IE9 上工作错误 - 如果活动元素是文档正文，它会模糊整个浏览器窗口。最好检查一下这种情况：

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

【讨论】：

我收到Property 'blur' does not exist on type 'Element'.ts(2339)

您需要转换为 htmlElement。

【参考方案6】：

使用 jQuery 就可以了：$(this).blur();

【讨论】：

这是一个旧答案，所以您现在可能已经知道了，但是这个答案不适用有两个原因。 1. 假设 OP 使用的是 jquery，2. this 需要成为焦点元素，而问题明确指出 OP 不提前知道焦点元素。

【参考方案7】：

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

因此这是首选：

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

此外，我不鼓励使用已接受答案中提供的解决方案，因为由此产生的模糊不是官方规范的一部分，并且可能随时中断。

【讨论】：

使用较新的as 类型转换的类似解决方案：(document.activeElement as HTMLElement).blur()。