Android浏览器中的Textarea由键盘隐藏

Question

在iOS中，即使对于包含在position: fixed的div中的textareas，当textarea具有焦点时，操作系统也会确保它是可见的（这有时意味着向上滑动整个浏览器窗口），以便键盘不会隐藏textarea 。

在Android浏览器中（我已经在2.3和4.0以及4.0中的Chrome中测试过股票浏览器），但这不会发生。 textarea被键盘覆盖，用户无法看到她正在键入的内容。

作为Android的临时解决方法，我设置position: fixed在textarea:focus并将其移动到屏幕顶部，以确保它是可见的。

有没有更优雅的解决方案来保持我的布局的完整性？

我在jsfiddle中做了一个小例子。 在Android浏览器中查看我的意思： http ： //fiddle.jshell.net/5cvj5/show/light/

Answer 1

我最终做了什么，以及我发现Facebook为克服同样的挑战所做的是在获得焦点时在textarea下面添加一个spacer块元素，然后滚动到视图的底部，如下所示：

var android_spacer = $('<div/>', {
    'class' : 'android_spacer'
}).css({
    'width'  : '100%',
    'height' :  '200px'
}).appendTo($('#parent_view'));

$('#the_textarea').on('focus', function() {
    $(this).after(android_spacer);
});

$('#the_textarea').on('blur', function() {
    $('.android_spacer').remove();
});

请注意，屏幕上一次只有一个间隔符。

Answer 2

只需将页脚的位置设置为绝对，并将底部设置为0，这将处理它