logo标签列表

当键盘弹出时，将文本框向上滚动。

javascriptandroidandroid-layoutandroid-softkeyboard
11

我正在使用html5/javascript/jQuery/css开发移动应用。 在应用中有多个文本区域。当我单击以输入时，键盘弹出（Android平板电脑）。但是文本区域仍停留在页面上。当键盘弹出时，如何滚动页面。

这有助于显示对视觉视口所做的更改。您可以检查高度并相应地进行更新。 - Bru
4个回答
15
使用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示例

4
为了完整回答，如果你想要动画滚动替换原有的代码：
$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

by

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

或者简单地使用Element.scrollIntoView()方法：

let inputs = $('input[type=text], textarea');
inputs.focus(function() {
    $(this)[0].scrollIntoView();
});
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);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接