我正在创建一个应用程序,其中我想要一个弹出对话框,其中包含一些文本字段,因此我从jquery mobile site中选择了一个示例并插入了4个输入文本以插入带有国家和地区的固定电话号码码。当我在模拟器上运行它时会打开弹出对话框,但是当用户尝试在文本框中插入某些内容时,它会向上滚动,所以我在脚本中使用此代码来禁用页面滚动,如下所示,此问题是用户能够仅在2个文本框中插入数据,因为文本框的其余部分隐藏在键盘旁边。我想要的是当用户键盘打开时页面不应该自己滚动,用户应该能够滚动弹出对话框来插入数据。 这是我回来的代码:
删除页面...
<div
data-role="popup"
id="popupDialog"
data-overlay-theme="a"
data-theme="c"
data-dismissible="false"
style="max-width:400px;"
class="ui-corner-all"
>
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<input type='number' id='area code' placeholder='Area code'>
<input type='number' id='country code' placeholder='Country code'>
<input type='number' id='numder' placeholder='Number'>
<input type='button' id='open' data-rel='back' value='OK'>
</div>
</div>
这是禁用页面滚动的JavaScript:
$(document)
.on('popupafteropen', '[data-role="popup"]', function (event, ui) {
$('body').css('overflow', 'hidden');
})
.on('popupafterclose', '[data-role="popup"]', function (event, ui) {
$('body').css('overflow', 'auto');
});
提前致谢