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

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

<input type = "email" id = "hello" placeholder = "[email protected]" autofocus>

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

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

javascript html browser viewport html-input

12.12.2020 09:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 694

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    if (isVisible) el.focus();
}

<body onscroll = "handleScroll()" style = "overflow: scroll;">
  <input id = "hello" type = "email" placeholder = "[email protected]" style = "margin-top: 500px; margin-bottom: 200px;" />
</body>

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

— 12.12.2020 10:03

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

— 12.12.2020 10:05

12.12.2020 09:52