Android 软键盘隐藏了移动 HTML5 网络应用程序中的输入字段

Posted 2023-02-22

【中文标题】Android 软键盘隐藏了移动 HTML5 网络应用程序中的输入字段

【英文标题】：Android soft keyboard obscures input fields in mobile HTML5 web app

【发布时间】：2013-07-29 08:55:04

【问题描述】：

我正在编写一个可在 Apple 和 android 上运行的移动 html5 Web 应用程序。在我正在测试的 Android 设备上，我遇到了以下问题：

我有一个位于屏幕下方 50% 的输入 Web 控件文本框。当焦点转到文本框时，显示软键盘并遮盖/覆盖/隐藏用户应该输入的输入 Web 控件。只有当用户输入至少一个字符时，输入 Web 控件才会变得可见并且不再隐藏在键盘下方。

我想要的是输入的字段不会被键盘遮挡。当显示软键盘时，我希望输入 Web 控件保持可见。

这是在运行 Android 3.2 版的三星平板电脑上。

请告诉我如何做到这一点。

【问题讨论】：

这听起来像是旧版 Android 浏览器中的错误。除非可以使用某些现代用户代理复制此问题，否则应删除或关闭此问题。

【参考方案1】：

解决这个 android（现在也是 ios7）讨厌的最简单方法是使用输入焦点和模糊事件。如果您没有将页脚标记更改为类。

在 jQuery 中：

$("input").focus(function()
    $('footer').hide();
);

$("input").blur(function()
    $('footer').show();
);

【讨论】：

任何解释你的代码应该做什么？为什么隐藏任何组件时输入会变得可见？