1

我弹出一个表单，它无法立即在 iPad 上专注于输入。还有一个问题是表单按钮的主题在按下后从e变成了b，而且再也变不回来了！

     <div data-role="page" id="addrPage">
       <div id="popupLogin" data-theme="e" class="ui-corner-all"
        style="z-index: 2;position:fixed;display: none;left:10%;top:15%;width: 250px;height: 150px;background-color:#0">
        <form id="OKForm" >
            <input type="text" id="formEdit" value="" placeholder="Input"           data-theme="e" autofocus="autofocus"/>
            <button type="submit" id="btnOK" data-theme="e">
                OK
            </button>
        </form>
        </div>
        <a data-role="button" id="tbProp">show</a>
    </div><!-- /page -->
<script>
$('#tbProp').bind( "click", function(event, ui) {
    $('#popupLogin').show();
        setTimeout(function(){
            $("#formEdit").focus();
        },0);
});

$('#OKForm').submit(function() {
    $("#popupLogin").hide();
    $("btnOK").removeClass("ui-btn-up-b ui-btn-hover-b").addClass("ui-btn-up-e ui-btn-hover-e");
    return false;
});
</script>

演示：http: //jsfiddle.net/gclsoft/JZgWT/1/

4

1 回答 1

1

更新：要在弹出窗口打开后打开虚拟键盘，请使用以下代码。

$('#popupLogin').on('popupafteropen', function () {
 $('#formEdit').trigger('click');
});

jQuery 中的弹出窗口有一个data-role="popup"并且必须放在data-role="page"div 中。这是显示/关闭它的正确方法。不推荐使用.show()or 。.hide()

标记

<div data-role="page" id="addrPage">
 <div id="popupLogin" data-theme="e" data-role="popup">
  <form id="OKForm">
   <input type="text" id="formEdit" value="" placeholder="Input" data-theme="e"/>
   <button type="submit" id="btnOK" data-theme="e">OK</button>
  </form>
 </div> <!-- /popup -->
 <a data-role="button" id="tbProp">show</a>
</div> <!-- /page -->

jQuery 移动

打开弹窗：

$('#tbProp').on('click', function () {
 $('#popupLogin').popup('open');
 $('#formEdit').focus();
});

关闭它并刷新提交按钮：

$('#OKForm').submit(function () {
 $('#popupLogin').popup('close');
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

或者您可以在弹出窗口关闭后刷新按钮：

$('#popupLogin').on('popupafterclose', function () {
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

CSS -可选

#popupLogin {
 padding: 10px !important;
}

工作演示

于 2013-04-21T11:37:16.817 回答