28

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

标题 - 标志等 - 绝对定位

内容 - 可滚动，绝对定位

页脚，40px 绝对定位

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

知道如何解决这个问题吗？这只发生在 Chrome-Android 上。iOS 上的 Safari 和 Windows Phone 和其他移动浏览器上的 IE 运行良好。

4

7 回答 7

8

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

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

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

根据您的布局，您可能需要更多创意，您可以在 body 上设置一个用于聚焦和非聚焦状态的类，并相应地更改 UI，但是要在移动设备、桌面等设备上保持良好的体验开始变得棘手

这是一个示例http://jsbin.com/emumeb/30/quiet代码： http: //jsbin.com/emumeb/30/edit

显然这是 chrome 应该自己处理的事情（类似于 iOS 的 UX），所以我提出了一个针对 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。

于 2013-08-08T11:00:21.990 回答
8

我希望有一个仅限 CSS 的解决方案，但我认为没有。Gaunt Face 的回答是一个很好的方法。不幸的是，在我的情况下，这需要进行一些更改，并且有可能破坏自动化（因为 url 添加了#targets）。

我通过更改 2 个单击处理程序中的位置类型解决了这个问题。

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

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

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

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

于 2013-08-08T15:47:36.160 回答
7

我不像你们那么聪明，

于是我拿了一把尺子，量了一下我手机屏幕的大小。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);
    });
于 2018-02-15T22:34:34.897 回答
6

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

#myElement {
  position: fixed;
  bottom: 2em;
}
于 2016-06-22T18:09:00.143 回答
5

我找到了一个运行良好的 CSS 解决方案。

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

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

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

    }
}
于 2016-05-09T08:21:20.633 回答
2

我曾经scrollIntoView解决过这个问题。 

$(document).on('focus', selector, function() {
    document.querySelector(selector).scrollIntoView();
});
于 2017-07-15T15:40:56.573 回答
0

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

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

不过，现在应该解决这个错误。

于 2015-12-17T02:45:18.857 回答