4

当用户使用 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. 标签下顶行的第二个编辑框。出现软键盘。当键盘可见时,向下滚动页面,使第二行编辑框被键盘覆盖(如果还没有的话)。然后点击键盘的“下一步”按钮。根据您的方向,您将收到一条警报,指示已按下导航栏按钮之一。软键盘将消失,焦点将在第二行的第一个编辑框上。事实上,当软键盘可见时,您可以通过尝试“制表”到导航栏正下方的任何字段元素来导致它发生。

谁能看到我在导致这种行为的页面设置中出错的地方?我能做些什么来解决这个问题吗?

如果您已经阅读到这里,感谢您的坚持,并感谢您提供的所有帮助。

亚历克斯。

4

0 回答 0