安卓网络浏览器和虚拟键盘
Posted
技术标签:
【中文标题】安卓网络浏览器和虚拟键盘【英文标题】：android web browser and the virtual keyboard 【发布时间】：2013-03-22 10:42:49 【问题描述】：我正在使用 PhoneGap 2.5.0 编写一个 html5 应用程序。
在应用程序的某些部分，比如搜索页面，当虚拟键盘出现时，它会缩小整个页面，所以我仍然可以看到键盘正上方的页脚。
但是在应用程序的其他部分，例如对话框，键盘会覆盖页面，因此可能会覆盖某些字段。
我没有在应用程序中使用任何“固定”定位元素。需要留在同一个地方的所有元素都被设为“绝对”。
键盘什么时候放在视图上，什么时候缩小它？至今没找到答案。
相关的 HTML：
<body>
<div role="dialog" id="details">
<div class="popup-content">
<header>
<h1 role="heading">Details</h1>
</header>
<article>
<div class="content">
<div class="label">Some Title</div>
<div id="dynamic_form">
<form><!-- dynamically filled form --></form>
</div>
</div>
</article>
<footer>
<ul class="footer-nav-buttons">
<li><a>Back</a></li>
</ul>
</footer>
</div>
</div>
<page id="search">
<header>
<h1>Search</h1>
</header>
<article class="page-content">
<div class="ui-header">
<input name="searchterm" id="searchtermtextbox" value="" type="text">
</div>
<article>
<div id="searchresultscontainer"></div>
</article>
</article>
</page>
<footer>
<ul class="footer-nav-buttons main-navigation-bar">
<li><a href="#menu" role="menuitem" class="button-menu"></a></li>
<li><a href="#contacts" class="button-contacts"></a></li>
<li><a href="#search" class="button-search"></a></li>
</ul>
</footer>
</body>
以及相关的 CSS（还不完善，我稍后会尝试改进它，但它包含我正在使用的基本规则，不包括颜色、渐变、阴影等视觉样式）：
body margin: 0; position: absolute; height: 100%; width: 100%;
page position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none;
page.selected display: block;
page>header position: absolute; top: 0; left: 0; right: 0; height: 1cm;
page article position: absolute; top: 1cm; left: 0; bottom: 15mm; right: 0;
div[role='dialog'] div.popup-content footer position: relative;
div[role='dialog'].visible opacity: 1; z-index: 100;
div[role='dialog'].active display: -webkit-box; display: box; -webkit-box-align: center;
div[role='dialog'] div.popup-content article position: relative;
div[role='dialog'] div.popup-content article div.content position: relative;
body>footer position: absolute; bottom: 0; left: 0; right: 0; height: 15mm;
ul.footer-nav-buttons position: relative; display: -webkit-box; display: box; -webkit-box-align: center;
box-align: center; -webkit-box-pack: center; box-pack: center; list-style: none;
height: 100%; width: 100%; padding: 0; margin: 0;
-webkit-margin-before: 0;-webkit-margin-after: 0; -webkit-margin-start: 0;
-webkit-margin-end: 0; -webkit-padding-start: 0;
ul.footer-nav-buttons li a margin: 5px;
【问题讨论】：
请说明您使用的是什么 CSS。问题可能出在 CSS 中 【参考方案1】：解决这个 android 讨厌的最简单方法是使用输入焦点和模糊事件。
在 jQuery 中：
$("input").focus(function()
$('footer').hide();
);
$("input").blur(function()
$('footer').show();
);
【讨论】：
以上是关于安卓网络浏览器和虚拟键盘的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法在 Safari（网络浏览器）上隐藏 iPad 键盘