android - Android 浏览器中的文本区域被键盘隐藏

Question

在 iOS 中，即使对于包含在具有 position: fixed 的 div 中的文本区域，当文本区域具有焦点时，操作系统会确保它可见(这有时意味着向上滑动整个浏览器窗口)所以文本区域未被键盘隐藏。

在 Android 浏览器中(我测试了 2.3 和 4.0 中的普通浏览器以及 4.0 中的 Chrome)，这不会发生。文本区域被键盘覆盖，用户看不到她正在输入的内容。

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

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

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

Answer 1

我最终做的，以及我发现 Facebook 为克服同样的挑战所做的，是在 textarea 获得焦点时在其下方添加一个间隔 block 元素，然后滚动到 View 底部，如下所示:

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();
});

请注意，屏幕上一次只能显示一个间隔符。