我弹出一个表单,它无法立即关注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>
答案 0 :(得分:1)
更新:要在弹出窗口打开后打开虚拟键盘,请使用以下代码。
$('#popupLogin').on('popupafteropen', function () {
$('#formEdit').trigger('click');
});
jQuery中的弹出窗口有一个data-role="popup"
,必须放在data-role="page"
div中。这是显示/关闭它的正确方法。建议不要使用.show()
或.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 Mobile
打开弹出窗口:
$('#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;
}
<强> Working Demo 强>