安卓浏览器中的文本框被键盘遮挡问题

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/

- Frank

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

请注意，屏幕上始终只有一个空白符号。

- Frank

---

我遇到了同样的问题，而且我正在测试你的解决方案。你能告诉我 #parent_view 是什么吗？ - zamil

Answer 2

只需将页脚的位置设置为绝对位置，并将底部设置为0，即可解决此问题。

- Samrin