我们遇到一个令人不安的问题,当用户使用Android软键盘的“下一步”键在编辑字段之间“标记”时,会触发导航栏按钮。这似乎仅限于Android 4.1,因为问题没有出现在Android 4.0上。我们正在使用三星Galaxy Tab2 7“设备,目前无法访问任何其他Andorid设备进行比较。我们正在使用jQuery v1.8.2和jQuery Mobile v1.2.0.jQM 1.3目前不适合我们由于我们项目中的其他依赖库目前不支持jQM 1.3。
如果从设备浏览器查看,可以使用以下代码重现行为;
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta charset="UTF-8" />
<style>
body {font-size:14px;}
.my-ui-header > .ui-btn {margin: 10px; height: 3.7em; width: 5.3em;}
.my-ui-header .ui-btn-inner {padding-top:1.65em; padding-bottom:1.65em; }
.ui-header .my-title {font-size: 32px; margin-bottom:0px; margin-left: 3em; margin-right: 2em;text-align: center; overflow: hidden;}
.ui-header .my-subtitle {font-size: 18px; margin-top: 0px; margin-left: 4em; margin-right: 2em; text-align: center; overflow: hidden;}
.footer-nav .ui-btn .ui-btn-inner {padding-top: 40px !important;}
.footer-nav .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important;-webkit-border-radius: 0 !important; border-radius: 0 !important; background-size: 30px 30px;}
</style>
<title>JQM Fixed Footer</title>
</head>
<body>
<div data-role="page" id="home">
<script type="text/javascript">
$('#home').live('pageinit', function() {
$("#button1").bind("click", function(event, ui) {
alert("Oy...button 1 was clicked!");
});
$("#button2").bind("click", function(event, ui) {
alert("Oy...the other button was clicked,\nyeah,button 2 it was!");
});
});
</script>
<div data-role="header" data-position="fixed" data-tap-toggle="false" class="my-ui-header">
<p class="my-title">DEMO TITLE</p>
<p class="my-subtitle">Subtitle</p>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="dateField">Date</label>
<input id="dateField" name="dateField" type="date" name="clear" id="dateField" />
</div>
<div data-role="fieldcontain">
<label for="timeField">Time</label>
<input id="timeField" name="timeField" type="time" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="Item1Select">Item 1</label>
<input id="Item1Select" name="Item1Select" type="text" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="obsobs" >Item 2</label>
<input id="obsobs" name="obsobs" type="number" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="item3" >Item 3</label>
<input id="item3" name="item3" type="number" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="item4">Item 4</label>
<input id="item4" name="item4" type="number" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="item5" >Item 5</label>
<input id="item5" name="item5" type="number" name="clear" data-clear-btn="true" />
</div>
<div data-role="fieldcontain">
<label for="item6">Item 6</label>
<textarea cols="40" rows="8" name="item6" id="item6"></textarea>
</div>
<div data-role="fieldcontain">
<label for="item7">Item 7</label>
<textarea cols="40" rows="8" name="item7" id="item7"></textarea>
</div>
<div data-role="fieldcontain">
<label for="item8" >Item 5</label>
<input id="item8" name="item8" type="number" name="clear" data-clear-btn="true" />
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="oneFooter">
<div data-role="navbar" class="footer-nav">
<ul>
<li><a href="#" id="button1" data-icon="custom">Button 1</a></li>
<li><a href="#" id="button2" data-icon="custom">Button 2</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我们的项目基于Cordova,因此出现在股票浏览器上。我在这里为上面的代码创建了一个jsFiddle(http://jsfiddle.net/UMm3c/11),可用于观察行为。要查看此问题,请向下滚动页面,然后选择Col 2标签下顶行的第二个编辑框。出现软键盘。键盘可见时,向下滚动页面,键盘覆盖第二行编辑框(如果尚未编辑)。然后点击键盘上的“下一步”按钮。根据您的方向,您将收到一条警报,指示已按下某个导航栏按钮。软键盘将消失,焦点将位于第二行的第一个编辑框中。实际上,当软键盘可见时,您可以通过尝试“选项卡”到导航栏正下方的任何字段元素来使其发生。
任何人都可以在导致此行为的页面设置中看到我出错的地方吗?有什么办法可以解决这个问题吗?
如果您已经阅读过这篇文章,请感谢您坚持使用它,并感谢您的帮助。
亚历。