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

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

标题-徽标等-绝对定位

内容-可滚动、绝对定位

页脚，40px绝对定位

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

你知道怎么解决这个问题吗？这只发生在Chrome Android上。iOS上的狩猎

---

IE在Windows Phone和其他移动浏览器上运行良好。

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

您可以在此处看到一个示例：代码：

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

根据您的布局，您可能需要更具创造性，您可以在主体上设置一个类，用于聚焦和非聚焦状态，并相应地更改UI，但要在移动设备、桌面等上保持良好的体验，这会变得越来越棘手

下面是一个示例代码：

---

很明显，这是chrome应该自己解决的问题（类似于UX iOS），因此我针对chrome提出了一个bug-。

我希望只使用CSS解决方案，但我认为没有。瘦脸的回答是一个很好的方法。不幸的是，在我的例子中，这需要一些更改，并且有可能破坏自动化（因为url中添加了#targets）

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

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

我有第二个处理程序，用于当用户从输入字段中单击时—页面单击处理程序—在该处理程序中，我将位置类型恢复为绝对，使页面显示与以前一样

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

---

我看到了一些关于这方面的问题，但没有找到答案。我希望这对某人有帮助

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

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

---

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

我找到了一个效果非常好的CSS解决方案

您可以对高度小于300px的窗口屏幕执行css查询，这是显示软件键盘的手机的主要屏幕高度。它工作得很快也很好。比如说

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

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

    }
}

---

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

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

---

我使用了

scrollIntoView

来解决这个问题

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

---

我不像你们这么聪明

所以我拿了一把尺子，测量了我手机屏幕的大小。 然后测量键盘的大小

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

所以我在页脚上划了一个小号，亲切地称它为青蛙

我使用了这个代码：

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

---

这是一个很好的方法。非常感谢。不幸的是，在我正在编写的代码中，这需要在很多地方完成，自动化需要更新等等。我将写下我所做的，作为其他任何可能遇到这一问题的人的答案。@Count Face链接到我们将要启动的bug？：）

同样的问题，它在这里的文本区域出现了。我有固定的页眉和页脚，我如何解决这个问题。@Gaunface我有类似的问题，但我的输入字段是弹出式的，你知道有什么解决办法吗？根本不工作。（不深入你的代码实现）散列阻止了对输入的关注，使其变得毫无用处。这不是一个完整的答案：如果任何人有数字类型的字段，android会显示一个“下一步”按钮而不是Go。这意味着不会触发单击。相反，您可以检查聚焦事件，将自定义的“键盘向上”类添加到主体，然后在模糊事件上设置一个50毫秒的超时，以检查聚焦元素是否为主体。如果是，则意味着用户已单击退出输入或以任何其他方式关闭键盘。因此，您可以从正文中删除“键盘向上”。有一个CSS解决方案，请参阅我的帖子；）这些都是相当危险的假设！您不能根据视口大小假定您拥有的设备。平板电脑也有键盘，这些键盘的视窗大小与台式电脑相同。@Andy是的，我的文章只是展示了另一个在某些情况下有帮助的选项。平板电脑也可能出现这种情况，但这种情况不太常见，它们的键盘通常占屏幕的比例较小。这是缺点，但优点是该方法的速度和兼容性。这对我不起作用。即使在if（..）中有两行，窗口也不会在键盘上方向上滚动。