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

Question

在iOS中,即使对于包含在div中position: fixed的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();
});

请注意,屏幕上一次只有一个间隔符.