6

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

在 Android 浏览器中（我已经在 2.3 和 4.0 以及 Chrome 4.0 中测试了股票浏览器），这不会发生。textarea 被键盘覆盖，用户看不到她在输入什么。

作为仅适用于 Android 的临时解决方法，我将其设置为position: fixed打开textarea:focus并将其移至屏幕顶部，以确保它可见。

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

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

4

2 回答 2

7

我最终所做的，以及我发现 Facebook 为克服同样的挑战所做的事情是，当它接收到焦点时，在 textarea 下方添加一个间隔块元素，然后滚动到视图的底部，如下所示：

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

请注意，屏幕上一次只有一个垫片。

于 2013-01-18T18:43:32.547 回答
1

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

于 2016-02-25T14:01:18.700 回答