11

我正在使用 html5/javascript/jQuery/css 进行移动应用程序开发。我在应用程序中有多个文本区域。当我单击它进行输入时，键盘弹出（android 选项卡）。但是 textarea 保留在该页面上的位置。键盘弹出时如何滚动页面。

4

3 回答 3

15

使用 jQuery，获取 textarea 的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 示例

于 2013-08-26T19:23:05.370 回答
4

要完成答案，如果要为滚动替换设置动画：

$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

经过

var timing = 250;
$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, timing);
于 2016-07-26T15:04:24.570 回答
0

只检测浏览器窗口大小变化，当键盘弹出时，浏览器窗口大小会改变

$(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);
});
于 2020-02-27T17:51:18.287 回答