我正在使用 JQuery Mobile 1.4.5 构建一个 Web 应用程序。在 Android (v.4.4.2) 中使用 Google Chrome 主屏幕(全屏)模式时，我发现了一个问题，我确信是浏览器或 JQM 错误。
当我点击
Click Here!!
折叠标题并选择文本区域，键盘出现但隐藏了文本输入框，因为它位于屏幕的下半部分。这会阻止用户看到他们正在输入的内容，也无法按“提交”，除非他们最小化键盘。
当键盘打开时，文本框应该向上移动，因此它位于键盘上方，并且页面应该是可滚动的。这是我期望的行为，也是 Chrome 网络浏览器模式以及 iOS 全屏和浏览器模式中发生的情况。
对此有什么解决办法吗？它使应用程序的某些部分无法使用!
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="shortcut icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>
<script src="./js/jquery.js"></script>
<script src="./js/jqm1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.external-png-1.4.5.min.css">
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-png-1.4.5.min.css">
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-svg-1.4.5.min.css">
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="./css/jqm1.4.5/Theme.css">
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.icons-1.4.5.min.css">
<link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.structure-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<style>
.ui-title {
margin: 0em 15% 0em !important;
}
</style>
<div data-role="header" data-theme="a" data-position="fixed" style="min-height: 40px;">
<a href="#navigation" style="margin-left: 3px; margin-bottom: 3px;" data-icon="bars" data-iconpos="notext">Navigation</a>
<h1 style="white-space:normal;">test</h1>
<a href="#search" style="margin-right: 3px; margin-bottom: 3px;" data-icon="search" data-iconpos="notext">Search</a>
</div><!-- /header -->
<div data-role="content">
<div data-role='collapsible-set' data-corners='false' >
<div data-role='collapsible' data-theme='b' data-collapsed='false'><h2>1</h2>
</div> <!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>2</h2>
</div> <!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>3</h2>
</div> <!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>4</h2>
</div> <!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>5</h2>
</div> <!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>6</h2>
</div><!-- collapsible end -->
<div data-role='collapsible' data-theme='b'><h2>7</h2>
</div><!-- collapsible end -->
<div data-role='collapsible' data-theme='b'>
<h2>Click Here!!</h2>
<form>
<textarea cols='40' rows='auto' style='height:100px;' name='newNotes' id='newNotes'></textarea>
<input type='submit' id='Submit' value='Update' class='ui-btn ui-btn-c ui-btn-inline' data-theme='c' data-transition='pop' />
</form>
</div><!-- collapsible end -->
</div> <!-- close collapsible set -->
</div><!-- /content -->
</div><!-- /page -->
</body>
最佳答案
这显然是 Android 上持续存在的问题。
https://github.com/jquery/jquery-mobile/issues/1079
此链接的答案是禁用页面的全屏模式。 (两次提到工作。)
关于javascript - Jquery Mobile 1.4.5 设备中的虚拟键盘隐藏页面底部的表单输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30264263/