ввод на фокусе или нажатие клавиши табуляции, перемещение в центр экрана

Question

У меня есть несколько полей формы, охватывающих страницу страницы. При нажатии клавиши «Tab» для перехода по каждому полю ввода / выбора, оно помещается в следующее поле внизу страницы.

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

Существует ли сценарий javascript или jQuery, который может центрировать экран по вертикали вокруг сфокусированного поля ввода / текста / выбора / кнопки вместо выравнивания по низу?

Answer 1

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

$(':input').focus(function(){
    var center = $(window).height()/2;
    var top = $(this).offset().top ;
    if (top > center){
        $(window).scrollTop(top-center);
    }
});

Answer 2

То же сверху с эффектом плавной прокрутки

 $(':input').focus(function () {
         var center = $(window).height() / 2;
         var top = $(this).offset().top;
         if (top > center) {
             $('html, body').animate({ scrollTop: top - center }, 'fast');            
         }
     });

Answer 3

Проще всего было бы подключить плагин jQuery ScrollTo и плагин jQuery Viewport .

Затем оберните каждый вход + связанные другие элементы (ответ проверки, ....) в div.

В фокусе проверьте, является ли div полностью видимым, если не используете scrollTo. Готово.

Конечно, это немного глупо, но если вы можете жить с двумя дополнительными зависимостями и дополнительными ~ 4 КБ, это должно сработать, не выполняя вычисления самостоятельно.