javascript - 每次 Android 打开自己的虚拟键盘时，jQMobile 都会重新定位弹出窗口 - 我无法输入任何内容

Question

在以下问题和来自此和 another platform 的答案之后和一些像奥马尔先生这样的聪明人的建议，我决定重新设计我的登录过程，没有任何弹出窗口。

---

我使用 Jquery Mobile 1.4.3 开发了一个 PhoneGap 应用程序。我的登录页面是一个弹出窗口。我面临着一个无休止的流程循环。循环按此顺序工作，Android 打开其虚拟键盘，jQuery Mobile 重新定位弹出窗口，因为窗口大小已更改(因此 _handleWindowResize 在 jquery.mobile.1.4.3.js 中工作并失去焦点)。 Android 关闭虚拟键盘，因为没有聚焦的输入区域。同时 jQuery 在窗口中心显示弹出窗口，但窗口大小最近发生了变化，然后 jQuery 必须在窗口的新中心显示弹出窗口。

有没有不破坏我的 jQuery Mobile 库的解决方案？

我可以将“If block ”写入 jquery 库。但是，管理我的应用程序会更加困难。

我的流程如下所示；

1. 用户点击登录按钮

2. 我的弹出页面打开

   ------------第一个循环开始------------

3. 用户点击用户名字段输入用户名
4. 光标聚焦字段
5. Android 打开虚拟键盘
6. 然后 jQuery 尝试重新定位，因为键盘已显示且窗口大小已更改。因此，弹出窗口会隐藏并失去焦点。
7. 然后 Android 虚拟键盘被隐藏，因为没有任何 Activity 输入。

8. jQuery 显示没有输入焦点的新弹出窗口

   ------------第一个循环结束------------

9. (再次)用户单击用户名字段以键入用户名
10. (再次)光标聚焦字段
11. (再次)
12. (再次)
13. ....

编辑

我在单击用户名时遇到问题。

我的弹出标记；

    <div data-role="popup" id="page-login" data-theme="a"> 

        <div data-role="header" data-theme="b" style="height:130">
            <h1><img src="img/icons/sample.png" style="height:23px;width:96px"></h1>
        </div>    

        <div role="main" class="ui-content" style="margin: 10px 0 10px 0;">
            <form id="form-login">

                    <label for="em" class="ui-hidden-accessible">Username:</label>
                    <input type="email" name="email" id="em" data-clear-btn="true" value="test@yahoo.com" placeholder="E-Mail" data-theme="a" required autofocus >
                    <label for="pw" class="ui-hidden-accessible">Password:</label>
                    <input type="password" name="password" id="pw" data-clear-btn="true" value="" placeholder="Password" data-theme="a" required>
                    <p style="text-align:right;margin:0;"><span><a href="#page-password-reset" data-rel="popup" data-position-to="window" data-transition="pop" class="mini-text-link">I forgot password</a></span></p>

                <hr class="thin">
                <div class="ui-grid-a">
                    <div class="twin-buttons ui-block-a">
                        <small><button type="submit" id="login-submit" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-btn-icon-left ui-icon-check">Login</button></small>
                    </div>
                    <div class="twin-buttons ui-block-b" >
                        <small><a type="button" id="login-cancel" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ">İptal</a></small>
                    </div>
                </div>
                <input type='hidden' name='_csrf' value='null'>
            </form>

        </div>
        <div data-role="footer">
            <h4 style="font-size:10px">
                <span><a href="#page-register" class="mini-text-link">Sign up</a></span>
            </h4>
        </div> 
    </div>

Answer 1

我有同样的问题，我通过更新 JQM javascript 修复了它。

_handleWindowResize: function(/* theEvent */) {
    if ( this._isOpen && this._ignoreResizeTo === 0 ) {
        if ( ( this._expectResizeEvent() || this._orientationchangeInProgress ) &&
            !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
            // effectively rapid-close the popup while leaving the screen intact
            if(!((':focus').is('input') || $(':focus').is('textarea'))){//judge user is in input mode or not.
                this._ui.container
                .addClass( "ui-popup-hidden ui-popup-truncate" )
                .removeAttr( "style" ); 
            }
        }
    }
},

这不是最佳解决方案，但对我有用。