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

Posted 2023-03-05

【中文标题】在Android Chrome上隐藏在键盘后面的输入文本框

【英文标题】：input textbox hidden behind keyboard on android Chrome

【发布时间】：2013-08-09 06:29:13

【问题描述】：

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

标题 - 标志等 - 绝对定位

内容 - 可滚动，绝对定位

页脚，40px 绝对定位

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

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

【参考方案1】：

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

【讨论】：

这是一个很好的方法。谢谢你。不幸的是，在我正在处理的代码中，这必须在很多地方完成，必须更新自动化等等。我将写下我所做的，作为其他可能遇到此问题的人的答案。

@Gaunt Face 链接到我们要加注的错误？ :)

<div class="input-div"> <textarea id="blend_name" class="textArea1 " name="message" placeholder="Type your name here" style="font-size: 14px; white-space: pre-wrap; line-height: 20px;"></textarea> </div> 同样的问题，它在文本区域出现 这里我已经修复了页眉和页脚，我该如何解决这个问题。

@GauntFace 我有类似的问题，但我的输入字段是弹出形式的，你知道有什么好转的吗？

根本不工作。 （没有深入研究您的代码实现）散列阻止了对输入的关注，使其几乎毫无用处。

【参考方案2】：

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

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

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

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

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

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

【讨论】：

这不是一个完整的答案：如果有人有数字类型的字段，android 会显示“下一步”按钮而不是 Go。这意味着不会触发点击。相反，您可以检查焦点事件，将自定义“键盘向上”类添加到主体，然后在模糊事件上设置 50 毫秒的超时，以检查焦点元素是否为主体。如果是，这意味着用户要么点击了输入，要么以任何其他方式关闭了键盘。因此，您可以从正文中删除“键盘向上”。

有一个CSS解决方案，看看我的帖子；）

【参考方案3】：

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

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

不过，bug 现在应该已经解决了。

【讨论】：

这对我不起作用。即使 if(..) 中有两行，窗口也不会在键盘上方向上滚动。

【参考方案4】：

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

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

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

    #myinputtext
        position: absolute; 
        top: 50px;

    

【讨论】：

这些是非常危险的假设！您不能从视口大小假设您拥有哪个设备。平板电脑也有键盘，它们的视口大小与台式机相同。

@Andy 是的，我的帖子只是展示了另一个在某些情况下可以提供帮助的选项。在平板电脑中可能会发生此问题，但频率较低，他们的键盘通常占用较少的屏幕百分比。这是缺点，但优点是该方法的速度和兼容性。

【参考方案5】：

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

#myElement 
  position: fixed;
  bottom: 2em;

【参考方案6】：

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

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

【参考方案7】：

我不像你们那么聪明，

于是我拿了一把尺子，量了一下手机屏幕的大小。 第二然后测量键盘的大小

我注意到键盘占据了 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);
    );