Gulir bidang teks ke atas saat keyboard muncul

Saya menggunakan html5/javascript/jQuery/css untuk pengembangan aplikasi seluler. Saya memiliki beberapa area teks di aplikasi. Ketika saya mengkliknya untuk memasukkan, keyboard muncul (tab Android). Namun textarea tetap berada di tempatnya pada halaman itu. Bagaimana cara menggulir halaman saat keyboard muncul.


android javascript android-layout android-softkeyboard
person user533844    schedule 26.08.2013    source sumber
comment
developer.mozilla.org/en-US/docs/Web/API/ Visual_Viewport_API Ini membantu dalam menampilkan perubahan yang dilakukan pada area pandang visual. Anda dapat memeriksa ketinggian dan memperbaruinya.   -  person Bru    schedule 30.11.2020

Jawaban (3)


arrow_upward
15
arrow_downward

dengan jQuery, dapatkan nilai offset().top textarea lalu atur posisi gulir dokumen menggunakan 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);
});

contoh jsfiddle

person MikeM    schedule 26.08.2013
comment
Sempurna!! Bekerja!! Terima kasih. - person user533844; 26.08.2013
comment
Mengapa tidak memiliki perilaku yang sama jika kita membungkus teks dalam div dan menargetkan div tersebut? Dalam kasus saya, ada formulir di dalam div. Terima kasih! - person user2060451; 30.08.2019
comment
Bagaimana Anda melakukannya tanpa jquery (javascript biasa)? - person B. Stucke; 01.06.2021

arrow_upward
4
arrow_downward

Untuk melengkapi jawabannya, jika Anda ingin menganimasikan gulir ganti:

$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

cukup deteksi perubahan ukuran jendela browser, ketika keyboard muncul, ukuran jendela browser akan berubah

$(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