Автоматическая прокрутка в браузере для перехода по элементам формы

Question

При вставке в поле формы, расположенное ниже нижней части области просмотра (или при вводе текстовой области, которая перекрывает нижнюю часть), браузеры обычно автоматически прокручивают достаточно вверх, чтобы вы могли видеть поле.Есть ли способ установить позицию, в которую перемещается браузер?

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

Приветствия

Answer 1

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

Ниже описано, как вы можете сделать это в jQuery:

// Constant amount of padding an element should be from the bottom of the window
var padding = 50;

// Add focus event to all your different form elements
$("input, textarea, select").focus(function(){

    // Check their position relative to the window's scroll
    var elementBottom = $(this).offset().top + $(this).height();
    var windowScroll = $(window).scrollTop();
    var windowBottom = windowScroll + $(window).height();

    if(elementBottom + padding > windowBottom){
        $(window).scrollTop(windowScroll + padding);
    }

});

Здесь вы можете увидеть в действии .

Редактировать:Набор текста в текстовой области

Вы можете захватить и проверить положение текстовой области во время набора текста с помощью обработчика события keydown :

$('textarea').keydown(function(){
    // same logic as above to check textarea position relative to window
});