当设备（机器人）的键盘是活动的jQuery Mobile的弹出式窗口小部件不动 [英] jquery mobile popup widget doesn't move when device's (android) keyboard is active

问题描述

我有一个jQuery移动（1.3.1）+ PhoneGap的应用程序中，我使用的是弹出式窗口小部件（这个程序是Android的任何vresion）。该弹出的登录（具有用户名，密码和一个登录按钮。每当我点击文本字段（无论是用户名或密码）的设备键盘来向上，但它与弹出重叠。由于这种重叠的，用户无法看到他们正在输入，并可以在登录在没有点击，除非键盘最小这里是code我有什么了 - 我已经使用了数据 - 位到=窗口

 ＆LT; A HREF =＃popupLogin数据相对=弹出数据位置为=窗口数据角色=按钮数据内嵌=真数据图标=检查数据主题=数据过渡=啪＆GT;完成＆LT; / A＆GT;
          ＆所述;股利数据角色=弹出的id =POPUPMENU数据主题=一个＆GT;
            ＆LT; D​​IV数据角色=弹出ID =popupLogin数据叠加主题=E的数据主题=A级=UI-角落都＆GT;
              ＆LT;形式GT;
                ＆LT; D​​IV的风格=填充：10px的20px的;数据叠加主题=B＆GT;
                  ＆LT; H3＆gt;请登录＆lt; / H3＆GT;
                  ＆LT;标签=PPCO premarks级=UI隐藏访问的＆GT;说明＆LT; /标签＆gt;
                  ＆LT; textarea的名字=PPCO premarksID =PPCO premarks值=占位符=答记者问（如果有的话）数据主题=一个＆GT;＆LT; / textarea的＆GT;
                  ＆LT;标签=UN级=UI隐藏访问的＆GT;用户名和LT; /标签＆gt;
                  ＆LT;输入名称=用户ID =UN的价值=占位符=用户名数据主题=类型=文本＆GT;
                  ＆LT;标签=私服类=UI隐藏访问的＆GT;密码＆LT; /标签＆gt;
                  ＆LT;输入名称=通行证ID =私服值=占位符=密码的数据主题=类型=密码＆GT;
                  ＆所述; A HREF =＃menuPag​​e＆GT;
                  ＆LT;按钮类型=提交数据主题=数据图标=检查ID =ppCheckDone的onClick =updateppc（）＆gt;登录，与＆lt; /按钮＆GT;
                  ＆所述; / a取代; ＆LT; / DIV＆GT;
              ＆LT; /形式GT;
            ＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
 

如何使与设备键盘重叠朝着向上的方向我弹出的举动呢？

解决方案

可以复位一旦输入字段集中在它弹出。

  $（＃popupLogin输入，#popupLogin文本区域）。在（焦点访谈，函数（）{
  $（＃popupLogin）。弹出（重新定位，{
    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 */
  });
});

Demo

这篇关于当设备（机器人）的键盘是活动的jQuery Mobile的弹出式窗口小部件不动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！