Прокручивать текстовое поле вверх при всплывающей клавиатуре

Я использую html5/javascript/jQuery/css для разработки мобильных приложений. У меня есть несколько текстовых полей в приложении. Когда я нажимаю на это для ввода, появляется всплывающее окно клавиатуры (вкладка Android). Но текстовое поле остается там, где оно находится на этой странице. Как я могу прокручивать страницу, когда появляется клавиатура.


android javascript android-layout android-softkeyboard
person user533844    schedule 26.08.2013    source источник
comment
developer.mozilla.org/en-US/docs/Web/API/ Visual_Viewport_API Это помогает отображать изменения, сделанные в визуальном окне просмотра. Вы можете проверить высоту и обновить ее соответственно.   -  person Bru    schedule 30.11.2020

Ответы (3)


arrow_upward
15
arrow_downward

с помощью jQuery получите значение offset().top текстовой области, затем установите положение прокрутки документа с помощью scrollTop()

var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
    scrollTopPadding = 8;

$('textarea').focus(function() {
    // get textarea's offset top position
    var textareaTop = $(this).offset().top;
    // scroll to the textarea
    $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);
});

пример jsfiddle

person MikeM    schedule 26.08.2013
comment
Идеальный!! Работал!! Спасибо. - person user533844; 26.08.2013
comment
Почему у него не будет такого же поведения, если мы обернем текст в div и нацелимся на div? В моем случае внутри div есть форма. Спасибо! - person user2060451; 30.08.2019
comment
Как бы вы это сделали без jquery (обычный javascript)? - person B. Stucke; 01.06.2021

arrow_upward
4
arrow_downward

Чтобы завершить ответ, если вы хотите анимировать прокрутку, замените:

$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

by

var timing = 250;
$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, timing);
person Ludo    schedule 26.07.2016

arrow_upward
0
arrow_downward

просто обнаружьте изменение размера окна браузера, когда появится клавиатура, размер окна браузера изменится

$(window).resize(function() {
    var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
    scrollTopPadding = 8;
    // get input tag's offset top position
    var textareaTop = $(this).offset().top;
    // scroll to the textarea
    $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

    // OR  To add animation for smooth scrolling, use this. 
    //$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);
});
person jafar690    schedule 27.02.2020