如果表单字段位于导航栏下方，则在按下Android软键盘“下一步”键时单击jqm导航栏按钮

Question

我们遇到一个令人不安的问题，当用户使用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标签下顶行的第二个编辑框。 出现软键盘。 键盘可见时，向下滚动页面，键盘覆盖第二行编辑框（如果尚未编辑）。 然后点击键盘上的“下一步”按钮。 根据您的方向，您将收到一条警报，指示已按下某个导航栏按钮。 软键盘将消失，焦点将位于第二行的第一个编辑框中。 实际上，当软键盘可见时，您可以通过尝试“选项卡”直接位于导航栏下方的任何字段元素来使其发生。

任何人都可以在导致此行为的页面设置中看到我出错的地方吗？ 有什么办法可以解决这个问题吗？

如果您已经阅读了这篇文章，感谢您坚持下去，并感谢您提供的帮助。

亚历克斯。