Как проверить, что любой элемент формы внутри набора полей имеет фокус - PullRequest
Новая
       33

Как проверить, что любой элемент формы внутри набора полей имеет фокус

0 голосов
/ 29 августа 2018

Я хочу частично проверить форму, проверив все элементы внутри набора полей.

В качестве триггера для этой проверки я слушаю 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') всегда имеет length из 0.

Как надежно проверить, есть ли у fieldset дочерний элемент с :focus?

Примечание: я не хочу использовать jQuery или любую другую библиотеку для этой задачи.

1 Ответ

0 голосов
/ 29 августа 2018

Разве вам не нужно просто ждать, пока фокус на новом элементе не произойдет? Как это: 

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>
...