We have an alarming issue when the navigation bar button is triggered when user tabs are between edit fields using the Android Next keyboard. This seems to be limited to Android 4.1 as the problem does not appear on Android 4.0. We use Samsung Galaxy Tab2 7 devices and do not have access to other Andorid devices at this time for comparison. We are using jQuery v1.8.2 with jQuery Mobile v1.2.0. JQM 1.3 is not an option for us at the moment, due to other dependent libraries in our project that do not currently support jQM 1.3.
The following code can be used to reproduce behavior if it is displayed in the device’s browser;
<!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>
Our project is based on Cordoba and therefore it appears in the stock browser. I created jsFiddle for the above code here ( http://jsfiddle.net/UMm3c/11 ), which can be used to observe the behavior. To see this problem in action, scroll down the page and select the second edit box for the top line under the Col 2 label. A soft keyboard appears. While the keyboard is visible, scroll down so that the second row of edit fields is covered by the keyboard (if it has not already been). Then click the "Next" button. Depending on your orientation, you will receive a warning that one of the buttons on the navigation bar is pressed. The soft keyboard will disappear and the focus will be in the first edit window of the second line. In fact, you can make it happen by trying to “paste” into any element of the field that is directly below the navigation bar when the soft keyboard is displayed.
Can someone see where I made a mistake in setting up the page that causes this behavior? Is there anything I can do to solve this?
If you read this, thanks for sticking to it, and thanks for any help.
Alex
source share