如何使用javascript检查元素是否已聚焦子元素？_Javascript_Jquery_Html_Focus

如何使用javascript检查元素是否已聚焦子元素？

javascript jquery html

如何使用javascript检查元素是否已聚焦子元素？,javascript,jquery,html,focus,Javascript,Jquery,Html,Focus,我正在尝试从代码中删除所有jQuery。直到现在我还用 if($(selector).find(':focus').length === 0){ //focus is outside of my element }else{ //focus is inside my element } 要确定焦点是否在我的一个元素中。您可以向我展示一种无jQuery的方法吗？要检索所选元素，您可以使用： let activeElement = document.activeElement 要检查特定

我正在尝试从代码中删除所有jQuery。直到现在我还用

if($(selector).find(':focus').length === 0){
  //focus is outside of my element
}else{
  //focus is inside my element
}

要确定焦点是否在我的一个元素中。您可以向我展示一种无jQuery的方法吗？

要检索所选元素，您可以使用：

let activeElement = document.activeElement

要检查特定元素，请执行以下操作：

let elem = document.getElementById('someId');

let isFocused = (document.activeElement === elem);

在

querySelectorAll（）中使用CSS伪类

setTimeout（函数（）{
if（document.queryselectoral（“div:focus”）.length==0）
控制台日志（“未聚焦”）；
其他的
console.log（“聚焦”）
}, 2000);

您可以为此使用本机DOM方法
el.contains(document.activeElement);

将检查activeElement
是否是el的后代。
如果要检查多个元素，可以使用some
函数进行迭代
 如果在模糊事件后document.activeElement
返回
元素时出现问题，只需使用setTimeout（）将其包装，它将返回正确的元素
handleBlur() {
    setTimeout(() => { 
        console.log(document.activeElement); // this actually return active/focused element
    });
}

如果您使用的是单机版，没有超时
handleBlur() {
    console.log(document.activeElement); // this is returning <body> element
}

handleBlur（）{
console.log（document.activeElement）；//这是返回的元素
}
可以使用元素的matches（）方法和一个简单的选择器字符串，如下所示：
let hasFocused = elem.matches(':focus-within:not(:focus)');
let focusedOrHasFocused = elem.matches(':focus-within');

不存在可能的副本。请阅读我的问题？Array.from（document.querySelectorAll（selector））.some（node=>node.contains（document.activeElement））
可能。实际上使用：focus
或：focus in
更好更容易。我知道这一点。但这并不能解决我的问题。我想知道活动元素是否在我的元素中。您可以通过getElementById
获取元素，并检查这是否是activeElement
。补充我的答案@Marggerritlanger你能解释一下为什么把它放在设置超时内吗？谢谢@这只是为了更好的理解！对于测试代码，您需要关注/不关注输入。因此，超时2秒后返回响应可能您的示例使用的id不同于div
，这有点让人困惑