เลื่อนช่องข้อความขึ้นเมื่อป๊อปอัปแป้นพิมพ์

ฉันใช้ 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 ของ textarea จากนั้นตั้งค่าตำแหน่งการเลื่อนเอกสารโดยใช้ 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 (จาวาสคริปต์ธรรมดา) - 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