Scroll textfield up when keyboard popsup

点点圈 提交于 2019-12-09 06:01:47

问题


I am using html5/javascript/jQuery/css for mobile app development. I have multiple textareas in the app. When I click on that to input, keyboard popup (android tab). But the textarea stays where it's on that page. How can I scroll page when keyboard pops up.


回答1:


with jQuery, get the textarea's offset().top value then set document scroll position using 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 example




回答2:


To complete the answer, if you want to animate the scroll replace:

$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

by

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


来源:https://stackoverflow.com/questions/18450659/scroll-textfield-up-when-keyboard-popsup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!