![当设备的]( "当设备的")
本文介绍了当设备的(android)键盘处于活动状态时，jquery 移动弹出窗口小部件不会移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 jquery-mobile (1.3.1) + phonegap 应用程序，我在其中使用了一个弹出窗口小部件(此应用程序适用于 Android 任何版本).此弹出窗口用于登录(它有用户名、密码和登录"按钮.每当我单击文本字段(用户名或密码)时，设备键盘就会出现，但它与弹出窗口重叠.因为在这种重叠中，用户无法看到他们正在输入的内容，除非键盘最小化，否则无法单击登录.这是我现在拥有的代码 - 我已经使用了data-position-to="窗口"
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Done</a><div data-role="popup" id="popupMenu" data-theme="a" ><div data-role="popup" id="popupLogin" data-overlay-theme="e" data-theme="a" class="ui-corner-all"><表格><div style="padding:10px 20px;"data-overlay-theme="b"><h3>请登录</h3><label for="ppcOpremarks" class="ui-hidden-accessible">备注</label><textarea name="ppcOpremarks" id="ppcOpremarks" value="" placeholder="备注(如果有)" data-theme="a" ></textarea><label for="un" class="ui-hidden-accessible">用户名</label><input name="user" id="un" value="" placeholder="username" data-theme="a" type="text"><label for="pw" class="ui-hidden-accessible">密码</label><input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password"><a href="#menuPage"><button type="submit" data-theme="a" data-icon="check" id="ppCheckDone" onClick="updateppc()">登录</button></a>
</表单>
如何让我的弹窗向上移动而不是与设备键盘重叠?
解决方案
一旦输入字段在其中获得焦点，您就可以重新定位弹出窗口.
$("#popupLogin input, #popupLogin textarea").on("focus", function () {$("#popupLogin").popup("重新定位", {y: 0/* 移动到顶部 */});});
演示
I have a jquery-mobile (1.3.1) + phonegap app in which I am using a pop-up widget (This app is for Android-any vresion). This popup is for sign-in (it has Username, Password and a "Sign-in" button. Whenever I click on a text-field (either Username or Password) the device keyboard comes-up but it overlaps with the popup. Because of this overlap, users cannot see what they are typing, and cannot click on Sign-In unless the keyboard is minimized. Here is the code what I have now - I've already used "data-position-to="window"
<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Done</a>
<div data-role="popup" id="popupMenu" data-theme="a" >
<div data-role="popup" id="popupLogin" data-overlay-theme="e" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;" data-overlay-theme="b">
<h3>Please sign in</h3>
<label for="ppcOpremarks" class="ui-hidden-accessible">Remarks</label>
<textarea name="ppcOpremarks" id="ppcOpremarks" value="" placeholder="Remarks (if any)" data-theme="a" ></textarea>
<label for="un" class="ui-hidden-accessible">Username</label>
<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
<label for="pw" class="ui-hidden-accessible">Password</label>
<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
<a href="#menuPage">
<button type="submit" data-theme="a" data-icon="check" id="ppCheckDone" onClick="updateppc()">Sign-In</button>
</a> </div>
</form>
</div>
</div>
How to make my popup move towards upward direction instead of overlapping with the device keyboard?
解决方案
You can reposition a popup once an input field is focused within it.
$("#popupLogin input, #popupLogin textarea").on("focus", function () {
$("#popupLogin").popup("reposition", {
y: 0 /* move it to top */
});
});
这篇关于当设备的(android)键盘处于活动状态时，jquery 移动弹出窗口小部件不会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！