Блог

Главная - Вопросы по программированию - Как автоматически установить фокус на поле , когда оно появляется в окне просмотра после прокрутки?

Как автоматически установить фокус на поле , когда оно появляется в окне просмотра после прокрутки?

#javascript #html #browser #viewport #html-input

#javascript #HTML #браузер #окно просмотра #html-ввод

Вопрос:

Я знаю autofocus атрибут:

 <input type="email" id="hello" placeholder="a@b.com" autofocus>

для автоматической установки фокуса на ввод HTML.

Но когда страница намного выше высоты браузера, есть ли способ (со специальным значением autofocus ?) Автоматически устанавливать фокус на поле только тогда, когда после прокрутки <input> оно появляется в окне просмотра / видимой в данный момент части страницы?

Ответ №1:

 function handleScroll() {
    var el = document.getElementById('hello')
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) amp;amp; (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight amp;amp; elemBottom >= 0;
    if (isVisible) el.focus();
} 
 <body onscroll="handleScroll()" style="overflow: scroll;">
  <input id="hello" type="email" placeholder="a@b.com" style="margin-top: 500px; margin-bottom: 200px;" />
</body>

Комментарии:

1. Действительно хорошее решение! Может быть, мы можем .blur() это сделать, если оно не видно. Пример: вы прокручиваете с помощью мыши, вы видите ввод, вы прокручиваете ниже с помощью мыши. Тогда вы больше не сможете прокручивать со стрелками клавиатуры (ввод из окна просмотра по-прежнему имеет фокус).

2. Еще одна вещь @prime: допустим, ввод находится в окне просмотра. У него есть фокус. Пользователь не заинтересован, поэтому он щелкает за пределами ввода, чтобы выйти из фокуса. Тогда каждая небольшая прокрутка (даже в 1 пиксель!) Снова фокусирует ввод, это может раздражать пользователя! У вас есть представление об этом случае? «Если ввод уже был в окне просмотра раньше, но сейчас у него нет фокуса, это, вероятно, потому, что пользователь вышел из фокуса, поэтому давайте не будем снова фокусироваться».