Question

我是J-query UI和Javascript的新手。在我的HTML页面中有一个EDIT USER按钮。如果我单击EDIT USER按钮，jQuery UI dialog-form将打开.Dialog-form包含输入字段（文本字段，选择字段）。对话框形式的输入字段的值将被动态附加。

它完全适用于浏览器（桌面），但在移动设备，输入字段对话框中无法聚焦。如果我点击文本字段，对话框形式上下移动。如果我选择字段移动显示空白屏幕。< / p>

我添加的脚本：

 <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" );
      }

});

任何人都可以帮助我。？

Answer 1

经过对移动和网上冲浪的严格测试后，我发现Bootstrap模式和jQuery UI对话框形式在旧版Android手机上无法正常（完美）工作。

jQuery UI对话框表单输入字段在移动设备中不起作用

1 个答案: