В js вы можете определить, когда на странице нет ничего сфокусированного?

Question

На моей странице есть несколько текстовых полей, и мне нужен хотя бы один из них, чтобы всегда иметь фокус. Есть ли js прослушиватель событий, который я могу вызвать, который обнаружит, когда ничто на странице не находится в фокусе, поэтому я могу дать ему фокус?

Answer 1

Если вы хотите узнать, нацелен ли элемент из списка тегов:

function hasFocus(selector) {
    return Array
        .from(document.querySelectorAll(selector))
        .some(function(el){
            return el === document.activeElement
        });
}

// usage 
console.log(hasFocus('input, select, textarea'))

Answer 2

Пожалуйста, проверьте мое решение по этой ссылке: https://codesandbox.io/s/nostalgic-lovelace-f9hei

Когда вы загружаете страницу, первый ввод получает фокус. Каждый раз, когда вы нажимаете. Случайный ввод фокусируется.

Событие размытия по умолчанию не всплывает. Так что сделайте его пузырьком, изменив usecapture на true.

const inputs = document.querySelectorAll('input')

document.querySelector('input').focus()

document.addEventListener('blur', (e) => {
  console.log(e)
  if (e.isTrusted) {
    const random = Math.round(Math.random() * (inputs.length-1));
    console.log(random)
    Array.from(inputs)[random].focus()
  }
},true)

Answer 3

Вы также можете прикрепить обработчик focusout к document, который проверяет фокусируемые элементы каждый раз, когда всплывает событие фокусировки. Затем сфокусируйтесь на элементе, отличном от источника события размытия, если его нет.

Отредактировано для комментария.