我正在尝试将我的代码中的所有jQuery移除。 目前为止,我使用了
if ($(selector).find(':focus').length === 0) {
// focus is outside of my element
} else {
// focus is inside my element
}
您能否向我展示一种不需要使用jQuery的方法来区分焦点是否位于我的元素内部?
我正在尝试将我的代码中的所有jQuery移除。 目前为止,我使用了
if ($(selector).find(':focus').length === 0) {
// focus is outside of my element
} else {
// focus is inside my element
}
您能否向我展示一种不需要使用jQuery的方法来区分焦点是否位于我的元素内部?
Node.contains
来完成此操作。el.contains(document.activeElement);
将检查activeElement
是否是el
的子孙节点。
如果你有多个元素需要检查,可以使用some
函数来进行迭代。
let hasFocused = elem.matches(':focus-within:not(:focus)');
let focusedOrHasFocused = elem.matches(':focus-within');
在 querySelectorAll()
中使用 CSS 伪类 :focus
。
setTimeout(function(){
if (document.querySelectorAll("div :focus").length === 0)
console.log("not focused");
else
console.log("focused")
}, 2000);
<div>
<input type="text">
</div>
focusin
和 focusout
事件。const el = document.getElementById("myEl");
el.addEventListener("focusin", () => console.log("focus!"));
el.addEventListener("focusout", () => console.log("blur!"));
focusout
事件期间,document.activeElement
将是文档主体。为了解决这个问题,您可以利用FocusEvent.relatedTarget
。document.activeElement
返回<body>
元素,那么你只需要使用setTimeout()包装它,就能返回正确的元素。handleBlur() {
setTimeout(() => {
console.log(document.activeElement); // this actually return active/focused element
});
}
如果你正在使用没有超时的独立程序
handleBlur() {
console.log(document.activeElement); // this is returning <body> element
}
结合了这里发布的一些答案。使用focusin,focusout,contains和relatedTarget的组合,您应该能够知道焦点是否在特定元素的子元素上。
const elm = document.getElementById('check-focus-here')
elm.addEventListener('focusin', (event) => {
console.log(event.target, event.relatedTarget)
// console.log(elm.contains(event.relatedTarget))
})
elm.addEventListener('focusout', (event) => {
console.log(event.target, event.relatedTarget)
console.log(elm.contains(event.relatedTarget))
})
#check-focus-here {
border: 2px solid;
padding: 8px;
margin: 8px;
}
<div id="check-focus-here">
<input id="first-name" type="text" />
<input id="middle-name" type="text" />
<input id="last-name" type="text" />
<button type="button">Save Name</button>
</div>
<button type="button">Tab to this for outside focus</button>
所有现有的非基于CSS的解决方案都没有考虑JavaScript上下文与呈现节点的框架不匹配的情况。为了解决这个问题,您需要执行以下操作:
el.contains(el.ownerDocument.activeElement)
el
可能在iframe或者与当前window
不同的窗口中的情况。这是你在开发Obsidian桌面应用时需要注意的一点。在那里,document
始终是主窗口,但你的代码需要能够处理其他窗口中的元素。 - PJ Ebyconst tr = document.querySelector("table tbody tr");
tr.addEventListener('blur', () => {
setTimeout(() => {
if (!tr.contains(document.activeElement)) {
// Execute your condition code here...
}
}, 200);
}, true);
<div class="parent">
<button>foo</button>
<button>food</button>
<button>foosh</button>
</div>
.parent { background: white }
.parent:focus-within { background: red }
.parent:focus-within button:not(:focus) { opacity: .5 }
要检索所选元素,您可以使用:
let activeElement = document.activeElement
检查特定元素:
let elem = document.getElementById('someId');
let isFocused = (document.activeElement === elem);
getElementById
获取元素,并检查它是否为 activeElement
。已添加到我的回答中。@MarcGerritLanger - omri_saadon
ancestorElement:focus-within
? - David ThomasArray.from(document.querySelectorAll(selector)).some(node => node.contains(document.activeElement))
或许可以。 - Felix Kling:focus
或:focus-within
更好、更容易。 - Felix Kling