Поля ввода в диалоговой форме пользовательского интерфейса jQuery не работают в мобильном телефоне

0

Я новичок в J-query UI и Javascript. На моей странице HTML есть кнопка EDIT USER. Если я нажму кнопку EDIT USER, откроется диалоговая форма jQuery UI. Диалоговая форма состоит из полей ввода (текстовые поля, поля выбора). Значения полей ввода в диалоговом формате будут динамически добавляться.

Его идеальная работа в браузере (рабочий стол), но в мобильном диалоговом окне полей ввода не может быть сфокусирована. Если я нажимаю текстовое поле, диалоговое окно перемещается вверх и вниз. Если поле выбора поля в поле отображается пустой экран.

Сценарий, который я добавил:

 <script src="../js/jquery-2.0.0.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript">
 </script>
 <script src="../js/jquery.ui.touch-punch.min.js"></script>

Диалоговая форма выглядит так:

    <div id="dialog-form" title="Edit User" >  
          <form>
                <fieldset>

                  <label>Name</label>
                  <input type="text" id="UserName" disabled="disabled" class="text ui-widget-content ui-corner-all input-large" />
                  <input type="text" id="UserId" style="display:none;"/>

                  <label>Staff Name</label>
                  <input type="text" id="StaffName" class="text ui-widget-content ui-corner-all input-large" />

                  <label>Password</label>
                  <input type="text" id="PassWord" class="text ui-widget-content ui-corner-all input-large" />

                  <label>Imei No</label>
                  <input type="text" id="ImeiNo" class="text ui-widget-content ui-corner-all input-large"/>

                  <label>User Role</label>
                  <select id="userroles" ><option value="Select UserRoles">Select UserRoles</option>
                  </select><br/>

            </fieldset>
        </form>
</div>

Инициализация диалоговой формы:

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 550,
    modal: true,
    buttons: {
        "Submit": function() {
            submit();
        },
        Cancel: function() {                         
          $( this ).dialog( "close" );
        }
      },
      close: function() {                       
           $( this ).dialog( "close" );
      }

});

Может кто-нибудь мне помочь.?

  • 0
    Попробуйте включить поддержку мобильных устройств jquery-ui: touchpunch.furf.com
  • 0
    Здесь отлично работает на мобильном (iPhone 5) jsfiddle.net/IrvinDominin/Bbspy
Показать ещё 6 комментариев
Теги:
forms

1 ответ

0

После серьезного тестирования на мобильных устройствах и серфинга в Интернете, я обнаружил, что модальность Bootstrap и диалоговое окно jQuery UI не будут работать корректно (в отличной форме) на старой версии Android-мобильного телефона.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню