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

【问题标题】：jQuery UI dialog-form input fields not working in mobilejQuery UI 对话框表单输入字段在移动设备中不起作用
【发布时间】：2013-10-25 07:49:38
【问题描述】：

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

它在浏览器（桌面）中完美工作，但在移动设备中，输入字段对话框表单无法聚焦。如果我点击文本字段，对话框表单上下移动。如果我选项卡选择字段移动显示空白屏幕。

我已经添加的脚本：

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

});

谁能帮帮我？

【问题讨论】：

尝试加入 jquery-ui 移动支持：touchpunch.furf.com
这里在移动设备（iPhone 5）上运行良好jsfiddle.net/IrvinDominin/Bbspy
@lzzey : 我忘记添加了。我已经包含了 touchpunch。
@Irvin Dominin aka Edward：你检查过你的手机吗？它可以在桌面浏览器中使用，但在移动设备中它不起作用。
是的，在 safari mobile iOS 7 在 jsfiddle 上运行良好；您是否有其他脚本/css 规则可以破坏移动设备上的对话框？

标签： javascript jquery html forms jquery-ui

【解决方案1】：

在手机和网上冲浪经过一些认真的测试后，我发现 Bootstrap modals 和 jQuery UI 对话框表单在旧版本的 Android 手机上无法正常工作（完美）。

【讨论】：