安卓Chrome上输入文本框被键盘遮挡问题

Question

安卓Chrome上输入文本框被键盘遮挡问题

androidhtmlgoogle-chromemobile

30

我有一个移动网页，格式如下：

头部 - 标志等 - 绝对定位

内容 - 可滚动，绝对定位

底部，40像素的绝对定位

内容区域有多个输入框。在Android上的Chrome浏览器中，在页面底部的输入框上点击时，当软键盘弹出时，输入框不会显示在视图中。页面会滚动以尝试将输入框向上移动，但移动的距离不足以让其可见。结果它被隐藏在页脚后面。

有什么办法可以解决这个问题吗？这只在Chrome-Android上出现。iOS的Safari和Windows Phone上的IE以及其他移动浏览器都能正常工作。

- Aniket

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。

- Matt Gaunt

这是一个不错的做法。谢谢。不幸的是，在我正在处理的代码中，这将不得不在许多地方完成，自动化将需要更新等等。我会把我所做的写成答案，以供其他可能遇到此问题的人参考。 - Aniket

请提供错误链接，我们可以为其点赞吗？ :) - sarumont

<div class="input-div"> <textarea id="blend_name" class="textArea1 " name="message" placeholder="在此输入您的姓名" style="font-size: 14px; white-space: pre-wrap; line-height: 20px;"></textarea> </div> 同样的问题，它出现在文本区域上方。我已经固定了页眉和页脚，如何解决这个问题。 - Suraj

@GauntFace 我有类似的问题，但我的输入字段是在弹出窗口中的，你知道有什么解决方法吗？ - mokNathal

完全不起作用。（不深入研究您的代码实现）哈希阻止了对输入的关注，使其几乎无用。 - Roko C. Buljan

8

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

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

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

我有第二个处理程序，用于当用户点击输入字段之外的区域时-页面单击处理程序-在其中将位置类型恢复为absolute，使页面看起来与之前完全相同。

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

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

- Aniket

1

这不是一个完整的答案：如果有任何数字类型字段，Android会显示一个“下一步”按钮而不是“前往”。这意味着点击不会被触发。相反，您可以检查焦点事件，将自定义的“键盘上升”类添加到body中，然后在模糊事件上设置一个50毫秒的超时，检查聚焦的元素是否为body。如果是，则表示用户已经单击了输入框之外或以其他方式关闭了键盘。因此，您可以从body中删除“keyboard-up”。 - Francesco Frapporti

有一个 CSS 解决方案，看看我的帖子 ;) - Alberto Perez

7

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

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

- bornSwift

我尝试过这个，但只有少数手机可以使用，而且有时候甚至它们也不能正常工作。 - UNK30WN

5

我找到了一个很好的CSS解决方案。

您可以查询窗口屏幕高度为300像素或更少的CSS，这是带有软件键盘显示的手机的大多数屏幕高度。它非常快速和有效。例如：

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

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

    }
}

- Alberto Perez

6

这些假设非常危险！你不能仅根据视口大小就假设使用的设备。例如，平板电脑有键盘，其视口大小与台式机相同。请注意不要改变原意，并使翻译更通俗易懂。 - Andy

@Andy 是的，我的帖子只是展示另一种在某些情况下有用的选项。这个问题可能会出现在平板电脑上，但它不太常见，因为它们的键盘通常占屏幕的比例较小。这些是缺点，但该方法的优点是速度和兼容性。 - Alberto Perez

3

我使用了 scrollIntoView 来解决这个问题。

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

- Pawan Kotak

0

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

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

虽然，这个漏洞现在应该已经被解决了。

- chuhai

那对我没用。即使在你的if(..)中加入了这两行代码，窗口仍然无法在键盘上方滚动。 - gene b.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danilo Ribeiro · Accepted Answer

我不像你们这些聪明的人，

所以我拿了一把尺子测量了我的手机屏幕的大小。

然后又测量了键盘的大小。

我发现键盘占据了屏幕的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);
    });