输入文本框隐藏在Android Chrome上的键盘后面

Question

我有一个以下格式的移动网页:

标题 - 徽标等 - 绝对定位

内容 - 可滚动,绝对定位

页脚,40px绝对定位

内容区域有多个输入框.在Android上的Chrome上,点击页面底部的输入框会导致弹出软键盘时输入不在视图中.页面会滚动以尝试向上移动框,但不足以实际显示.它最终隐藏在页脚后面.

知道如何解决这个问题吗？这仅在Chrome-Android上发生.iOS上的Safari和Windows Phone和其他移动浏览器上的IE工作得很好.

Answer 1

有几种方法可以解决这个问题,最明显的解决方案是使用javascript在URL上设置哈希值.

你可以在这里看到一个例子:http://jsbin.com/emumeb/24/quiet代码:http://jsbin.com/emumeb/24/edit

对于稍微复杂的示例,如果您有一个固定的页眉和页脚,您可能希望在设置哈希时使用目标来更改页面的外观.

根据您的布局,您可能需要更具创造性,您可以在主体上设置一个专注于非聚焦状态的类并相应地更改UI,但在移动设备,桌面等方面保持良好体验开始变得棘手

下面是一个例子http://jsbin.com/emumeb/30/quiet代码:http://jsbin.com/emumeb/30/edit

显然这是chrome应该处理的事情(类似于UX iOS),所以我提出了针对Chrome的错误 - https://code.google.com/p/chromium/issues/detail?id=270018&can= 4&colspec = ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

Answer 2

我希望只有CSS解决方案,但我不认为有一个.Gaunt Face的答案是一个很好的方法.不幸的是,在我的情况下,这需要一些更改,并且有可能在其他方面打破自动化(因为url已添加#targets).

我通过改变2个点击处理程序中的位置类型来解决这个问题.

我有一个任何输入/ textarea字段的点击处理程序.在该单击处理程序中,我将表单容器div的位置样式更改为静态.请注意,如果容器字段具有滚动条,则会将页脚推到底部.在我的情况下,这不是问题,因为当键盘弹出时,只有几个字段可见.用户无法看到任何差异.

我有一个第二个处理程序,当用户点击输入字段时 - 页面点击处理程序 - 我将位置类型恢复为绝对,使页面显示就像以前一样.

这有一个意想不到的后果 - 滚动位置丢失.我通过获取输入字段的偏移量并使用该偏移调用父div上的scrollTop来修复此问题,从而恢复位置.

我已经看到了一些关于这个的问题,但没有找到答案.我希望这可以帮助别人.

Answer 3

从绝对定位更改为固定定位应该可以解决问题。在页面加载期间绝对定位元素相对于初始页面大小（添加键盘会缩小可见页面）。固定相对于当前页面大小定位元素，将元素保持在键盘上方。

#myElement {
  position: fixed;
  bottom: 2em;
}

Answer 4

我找到了一个非常有效的 CSS 解决方案。

您可以对 300px 高度或更低的窗口屏幕执行 css 查询，这是显示软件键盘的手机的主要屏幕高度。它工作得非常快而且非常好。例如

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}

Answer 5

我不像你们那么聪明

于是我拿起尺子，测量了手机屏幕的尺寸。2号然后测量键盘的大小

我注意到键盘占据了屏幕的38％。

因此，我在页脚中放置了一个div，并将其称为“青蛙”。

我使用了这段代码：

 $('body').on('focus', 'input, textarea', function(event) {
        var altura = $(window).height();
        var scrollp = parseInt(parseInt(altura)/100*38);
        $("#divSapo").css("height",scrollp + "px");
        window.scrollTo(0,document.body.scrollHeight);
    });