Question

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

标题 - 徽标等 - 绝对定位

内容 - 可滚动，绝对定位

页脚，40px绝对位置

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

知道怎么解决这个问题吗？这仅在Chrome-Android上发生。 iOS上的Safari Windows Phone和其他移动浏览器上的IE工作正常。

Answer 1

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

您可以在此处查看相关示例：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应该自己处理的事情（类似于iOS 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的答案是一个很好的方法。不幸的是，在我的情况下，这需要进行一些更改，并且有可能在其他方面打破自动化（因为网址已添加了#targets）。

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

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

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

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

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

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

虽然，现在应该解决这个问题。

Answer 7

我使用scrollIntoView来解决此问题。

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

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

7 个答案: