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，这将处理它

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

2 个答案: