Javascript 防止html输入焦点丢失到body标记

当我将焦点放在输入字段上并单击主体的任何打开区域时，主体将成为document.activeElement，有没有办法完全防止主体焦点。 我要找的是：

防止身体聚焦并保持对输入字段的聚焦

避免在输入字段上触发模糊事件

我已经尝试添加tabindex=-1，但我相信它是用于选项卡功能的，因此在这种情况下不起作用

document.querySelector（“inpdontlosefocus”）
.addEventListener（“模糊”，函数（）{
const$log=document.querySelector（“#log”）；
$log.innerText+=“\r\n停止焦点”；
})

html，正文{
宽度：100vw；
高度：100vh；
}

---

为了更精确的演示，我添加了更多的html元素，这里的逻辑是，如果主体中的事件源不能聚焦，那么我们将焦点设置回我们想要的输入，其他方面，它是一个可聚焦的元素，因此将获得焦点（例如按钮、链接、输入等）；请注意，单击事件已附加到

主体

，单击主体外部不会有此行为

document.querySelector（'.notokaytogetfocus'）.addEventListener（“单击”，函数（e）{
if（e.target==document.activeElement）{
console.log（“可聚焦元素”）；
}否则{
console.log（“非聚焦元素”）；
//我们将在所需输入上设置foucs
document.querySelector（“#inpdontlosefocus”）.focus（）
}
})

.notokaytogetfocus{高度：100vh；宽度：100vw；}

做（可聚焦）
同侧眼睑

一些文本

为了更精确的演示，我添加了更多的html元素，这里的逻辑是，如果主体中的事件源不能聚焦，那么我们将焦点设置回我们想要的输入，其他方面，它是一个可聚焦的元素，因此将获得焦点（例如按钮、链接、输入等）；请注意，单击事件已附加到

主体

，单击主体外部不会有此行为

document.querySelector（'.notokaytogetfocus'）.addEventListener（“单击”，函数（e）{
if（e.target==document.activeElement）{
console.log（“可聚焦元素”）；
}否则{
console.log（“非聚焦元素”）；
//我们将在所需输入上设置foucs
document.querySelector（“#inpdontlosefocus”）.focus（）
}
})

.notokaytogetfocus{高度：100vh；宽度：100vw；}

做（可聚焦）
同侧眼睑

一些文本

以下是一个解决方案，它将始终关注文档中的输入字段：

• 您将能够在输入字段之间切换焦点

• 如果在未输入的元素外部单击，它将模糊最新的输入并对其应用焦点

var模糊，聚焦；
const$log=document.querySelector（“#log”）；
var els=document.querySelectorAll（'input'）；
Array.prototype.forEach.call（els，函数（el）{
el.addEventListener（'focus'，function（）{
聚焦=这个；
});
el.addEventListener（'blur'，function（）{
$log.innerText+=“\r\n停止焦点；”
模糊=这个；
});
});
文档.添加的列表器（“单击”，函数（e）{
e、 预防默认值（）；
if（聚焦&&focused.tagName==“输入”）{
$log.innerText+=“\r\nactiveElement=“+document.activeElement.id；
focus.focus（）；
}否则如果（模糊）模糊。焦点（）；
})

html，
标签{
宽度：100%；
身高：100%；
}

---

以下是一个解决方案，它将始终关注文档中的输入字段：

• 您将能够在输入字段之间切换焦点

• 如果在未输入的元素外部单击，它将模糊最新的输入并对其应用焦点

var模糊，聚焦；
const$log=document.querySelector（“#log”）；
var els=document.querySelectorAll（'input'）；
Array.prototype.forEach.call（els，函数（el）{
el.addEventListener（'focus'，function（）{
聚焦=这个；
});
el.addEventListener（'blur'，function（）{
$log.innerText+=“\r\n停止焦点；”
模糊=这个；
});
});
文档.添加的列表器（“单击”，函数（e）{
e、 预防默认值（）；
if（聚焦&&focused.tagName==“输入”）{
$log.innerText+=“\r\nactiveElement=“+document.activeElement.id；
focus.focus（）；
}否则如果（模糊）模糊。焦点（）；
})

html，
标签{
宽度：100%；
身高：100%；
}

添加代码？不希望身体聚焦的用例是什么？@jobayersozib谢谢，正在整理代码，并将添加一个示例。我知道，即使在上面的搜索框中，所有网页都有这种行为。@JohnPavek user requirement。如果他点击任何他想失去焦点的地方。此外，大量事件已绑定到输入字段的模糊事件。这里的答案可能是您想要添加代码的原因？您不希望身体聚焦的用例是什么？@jobayersozib谢谢，正在整理代码，并将添加一个示例。我知道，即使在上面的搜索框中，所有网页都有这种行为。@JohnPavek user requirement。如果他点击任何他想失去焦点的地方。此外，大量事件已绑定到输入字段的模糊事件。这里的答案可能就是您想要的答案。谢谢，如果我们删除.maincontent div，主体仍会获得焦点，并且似乎无法达到目的。在现实生活中，@Roystondsouza

body

标签包含你的元素，足够大；但是在这个片段中，

body

的行为与

html

文档中真实的

body

不同，所以我添加了

div

来模拟更真实的情况；此

高度：100vh

不是这里的键

div

；你可以将它应用到身体本身，你对身体高度的看法是正确的。我已经纠正了co