Кнопка jqm navbar нажата, нажав программную клавиатуру Android «Next», если поле формы находится под навигационной панелью

У нас есть тревожная проблема, когда кнопка «навигационная панель» запускается, когда пользовательские «вкладки» находятся между полями редактирования с помощью клавиши «Next» на клавиатуре Android. Это, как представляется, ограничено Android 4.1, поскольку проблема не появляется на Android 4.0. Мы используем устройства Samsung 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> 

Наш проект основан на Кордове, и поэтому он появляется в браузере акций. Я создал jsFiddle для вышеуказанного кода здесь ( http://jsfiddle.net/UMm3c/11 ), который можно использовать для наблюдения за поведением. Чтобы увидеть эту проблему в действии, прокрутите страницу вниз и выберите второе поле редактирования верхней строки под меткой Col 2.. Появляется мягкая клавиатура. Пока клавиатура видна, прокрутите страницу вниз, чтобы вторая строка полей редактирования была закрыта клавиатурой (если она еще не была). Затем нажмите кнопку «Далее». В зависимости от вашей ориентации вы получите предупреждение о том, что нажата одна из кнопок панели навигации. Мягкая клавиатура исчезнет, ​​и фокус будет находиться в первом окне редактирования второй строки. Фактически, вы можете заставить это произойти, пытаясь «вставить» в любой элемент поля, который находится непосредственно под навигационной панелью, когда отображается мягкая клавиатура.

Может ли кто-нибудь увидеть, где я ошибся в настройке страницы, которая вызывает это поведение? Есть ли что-то, что я могу сделать, чтобы это разрешить?

Если вы зачитали это далеко, спасибо за то, что вы его придерживаетесь, и спасибо за любую помощь.

Алекс.