Как постоянно сфокусировать элемент?

Question

Предположим, у меня есть страница, где кнопка или поле ввода является наиболее важным элементом на странице.Я знаю, что могу автоматически фокусировать элемент при загрузке страницы с помощью атрибута autofocus:

<button autofocus>Hello!</button>

. Это работает так, как рекламируется, но, к сожалению, элемент HTML теряет фокус, если пользователь нажимает на любой элемент.другая часть страницы.

Как я могу постоянно фокусировать HTML-элемент?

(Примечание: если для выполнения этой задачи действительно необходим JavaScript, пожалуйста, покажите решение, используя простой JavaScript [т.е. без jQuery]).

РЕДАКТИРОВАТЬ: Я делаю личное приложение, где на странице будет только одна кнопка, и больше ничего.Фокус позволит мне быстро «нажать» кнопку с помощью клавиатуры (например, нажатием клавиши ввода) в любое время.

Answer 1

Пожалуйста, смотрите мой комментарий .Я настоятельно рекомендую не делать этого в общем случае, но ваш звучит как вполне конкретный случай в хорошо контролируемой среде.

Вы можете подключить событие blur к кнопке и попытаться дать емуСнова сфокусируйтесь:

document.querySelector("button[autofocus]").addEventListener("blur", function() {
    var t = this;
    t.focus();
    setTimeout(function() { // Some browsers won't let you do it until
        t.focus();          // after the blur has completed
    }, 100);
});

<button autofocus>This is the button</button>
<button>Another button</button> just so we can see that it works if we tab away from the first one.

Или используйте интервальный таймер и т. Д.

Answer 2

Обратите внимание на предупреждения в комментариях.

document.getElementById('stayHere').addEventListener('blur', function() {
    this.focus();
});

Вы можете сделать это с помощью CSS в некоторой степени, а также:

body {
    pointer-events: none;
}
.greedy-button {
    pointer-events: auto;
}

Answer 3

Я думаю, что единственный вариант - это JavaScript:

var button = document.querySelector('button');
document.addEventListener('click', function(e) {
  if(!e.target.matches('button[autofocus]')) {
    button.focus();
  }
})

<button autofocus>focus</button>