gpt4 book ai didi

javascript - 如何检查字段集中的任何表单元素是否具有焦点

转载 作者:行者123 更新时间:2023-11-29 15:13:23 25 4
gpt4 key购买 nike

我想通过验证字段集中的所有元素来部分验证表单。

作为该验证的触发器,我正在监听 focusout 事件,这些事件会冒泡到每个字段集。

如果该字段集中的表单元素没有 :focus,我想执行验证。

我试过这样做:

const fieldsets = [...document.querySelectorAll('fieldset')]

for (const fieldset of fieldsets) {
fieldset.addEventListener('focusout', (e) => {
let focussedElements = e.currentTarget.querySelectorAll(':focus');
if (focussedElements.length === 0) {
console.log(`no element inside fieldset #${e.currentTarget.id} has focus`)
} else if (focussedElements.length > 0) {
console.log(`element ${focussedElements[0]} inside fieldset #${e.currentTarget.id} has focus`)
}
})
}
<fieldset id="fs1">
<legend>Fieldset 1</legend>
<input type="text">
<input type="text">
</fieldset>

<fieldset id="fs2">
<legend>Fieldset 2</legend>
<input type="text">
<select>
<option>1</option>
<option>2</option>
</select>
</fieldset>

但是 e.currentTarget.querySelectorAll(':focus') 始终具有 length0

我如何可靠地检查 fieldset 是否有包含 :focus 的子元素?

注意:我不想使用 jQuery 或任何其他库来完成任务。

最佳答案

难道您不需要等待对新元素的关注发生吗?像这样:

const fieldsets = [...document.querySelectorAll('fieldset')]

for (const fieldset of fieldsets) {
fieldset.addEventListener('focusout', (e) => {
let ct = e.currentTarget;
setTimeout(() => {
let focussedElements = ct.querySelectorAll(':focus');
if (focussedElements.length === 0) {
console.log(`no element inside fieldset #${ct.id} has focus`)
} else if (focussedElements.length > 0) {
console.log(`element ${focussedElements[0]} inside fieldset #${ct.id} has focus`)
}
}, 10)
})
}
<fieldset id="fs1">
<legend>Fieldset 1</legend>
<input type="text">
<input type="text">
</fieldset>

<fieldset id="fs2">
<legend>Fieldset 2</legend>
<input type="text">
<select>
<option>1</option>
<option>2</option>
</select>
</fieldset>

关于javascript - 如何检查字段集中的任何表单元素是否具有焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52079711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com