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

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

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

亚历克斯。

  ask by Narruda translate from so

本文未有回复,本站智能推荐:

1回复

固定页脚导航栏下的表单字段具有较高的点击优先级,例如导航栏项

我的页面很长,上面有选择框和输入字段,还有带有图标的固定导航栏(页脚菜单)。 如果用户单击导航栏项目,并且选择框位于导航栏下方-选择框会展开并在单击时做出反应-导航栏不会做出反应。 每个答案将不胜感激。 代码示例:
2回复

我希望Android软键盘在合适的时刻有一个“完成”按钮WITHOUT JAVA

我知道有关Android软键盘及其默认显示的按钮,以及在何种情况下以及如何修改它们的问题和答案。 但是,所有答案都涉及更改Java代码。 由于我正在使用Phonegap和jQueryMobile编写跨平台应用程序,因此我不想学习Java。 我的问题是:我有一个表单(按此顺序,缩写为
1回复

了解android文本输入和软键盘

当用户选择输入字段时,键盘出现,但输入字段文本在虚拟键盘的顶部。 当它是一个文本区域时,问题变得更糟,因为键盘只希望将焦点集中在第一行而不是整个文本区域框上。 在我的AndroidManifest.xml中,我尝试更改android:windowSoftInputMode ='adj
2回复

在Cordova应用程序中工作时如何禁用android软键盘

我有cordova应用程序,可从Web加载html页面。 现在这些网页具有输入字段,因此当单击这些输入字段时,将显示android默认键盘。 我不想使用此键盘,因为已经在侧面应用程序中将自定义键盘作为弹出窗口了。 我尝试的方法:在androidManifest.xml的活动中添加以下配置
1回复

出现软键盘时,Android HTML5应用程序会闪烁

我正在使用HTML5 , Jquery mobile 1.2和Phonegap 2.1.0开发适用于iPhone和android的应用程序。 在登录页面上,当用户点击输入字段时,出现软键盘,并且页面以闪烁效果滑动。 相同的应用在iPhone上可以正常使用。 问题仅在Android移动设备上
1回复

滚动网页输入字段到顶部防止通过软键盘隐藏

我点击输入字段时在移动设备上使用了一个网页,当我点击输入字段时,Android软键盘隐藏了输入字段我希望字段向上滚动以在键盘上方可见。 我搜索的各种文章很多都是指Android清单文件,但这是一个网页而不是应用程序。 我也尝试了各种javascript选项,包括下面的一个,但许多浏览器似
1回复

软键盘隐藏事件后未触发后退按钮事件

我正在开发一个应用程序,该应用程序有一个登录页面,并且包含了 可以很好地处理后退按钮事件,但是当我单击任何输入字段软键盘时,当按下后退按钮时,键盘将下降,但是当我再次单击后退按钮时,应用程序崩溃而不是调用“后退按钮”功能
2回复

页面加载时的jQuery移动框架显示软键盘

我有一个index.html页面。 其中的内容是2个文本框username和password 。 我需要的是页面加载本身,将重点放在第一个文本框上并显示软键盘... 我想在jquery mobile中获得它,也想知道剑道是如何完成的?
1回复

JQM标题按钮难以单击

我的JQM标头上有多个小的无文本按钮,请参见下图,在我的android phonegap应用程序上。 这些按钮很难在触摸屏设备上单击(在桌面浏览器上很好)。 似乎要触发click事件,我必须单击按钮顶部的10-20%,单击按钮的中部或底部没有任何作用。 这是HTML中的代码:
2回复

使Android平台的软键盘覆盖内容上方,而不是向上推

当然,有很多类似的问题与我的问题有关,但没有一个对我有用。 因此,这迫使我提出一个新问题。 因此,我正在开发一个混合移动应用程序,其中主屏幕包含两个独立的部分,并带有自己的输入标签。 因此,每当输入字段集中焦点时,本机Android SoftKeyboard就会将下部的内容向上推,这最