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

Question

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

标题 - 徽标等 - 绝对定位

内容 - 可滚动，绝对定位

页脚，40px绝对定位

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

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

Answer 1

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

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

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

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

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

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

Answer 2

有几种方法可以解决这个问题，最明显的解决方案是使用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 3

我和你们一样不聪明，

所以我拿了一把尺子测量了手机屏幕的大小。 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);
    });

Answer 4

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

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

Answer 5

我找到了一个非常好用的CSS解决方案。

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

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

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

    }
}

Answer 6

如果您使用jQuery，您可以使用以下代码：

$('body').on('focusin', 'input, textarea', function(event) {
  if(navigator.userAgent.indexOf('Android') > -1 && ...){
   var scroll = $(this).offset();
   window.scrollTo(0, scroll);
 }
});

虽然，这个bug现在应该解决了。

Answer 7

我用scrollIntoView来解决这个问题。

$(document).on('focus', selector, function() {
    document.querySelector(selector).scrollIntoView();
});