当设备的(android)键盘处于活动状态时,jquery 移动弹出窗口小部件不会移动
Posted
技术标签:
【中文标题】当设备的(android)键盘处于活动状态时,jquery 移动弹出窗口小部件不会移动【英文标题】:jquery mobile popup widget doesn't move when device's (android) keyboard is active 【发布时间】:2014-01-14 01:57:03 【问题描述】:我有一个 jquery-mobile (1.3.1) + phonegap 应用程序,我在其中使用了一个弹出窗口小部件(此应用程序适用于 android-any vresion)。此弹出窗口用于登录(它有用户名、密码和“登录”按钮。每当我单击文本字段(用户名或密码)时,设备键盘就会出现,但它与弹出窗口重叠。因为在这种重叠中,用户无法看到他们正在输入的内容,并且除非键盘被最小化,否则无法点击登录。这是我现在拥有的代码 - 我已经使用了“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>
如何让我的弹出窗口向上移动而不是与设备键盘重叠?
【问题讨论】:
【参考方案1】:一旦输入字段集中在其中,您就可以reposition
弹出窗口。
$("#popupLogin input, #popupLogin textarea").on("focus", function ()
$("#popupLogin").popup("reposition",
y: 0 /* move it to top */
);
);
Demo
【讨论】:
以上是关于当设备的(android)键盘处于活动状态时,jquery 移动弹出窗口小部件不会移动的主要内容,如果未能解决你的问题,请参考以下文章
当 iOS 键盘处于活动状态时,CSS 方向会自动切换到横向
Swift 防止 TabBar 在键盘处于活动状态时向上移动
当动态图形设备切换处于活动状态时,OS X 上的 SDL/OpenGL 出现无数警告
Xamarin.Forms iOS - 当设备连接互联网时开始上传数据,即使应用程序当前未处于活动状态或处于后台也是如此