当键盘可见时，jquery mobile 弹出窗口在 ipad 上消失

Question

我有弹出窗口。当使用 IPAD 并单击输入字段时，当文本输入字段获得焦点时，键盘会显示并弹出窗口消失。这里弹出面板代码。请帮忙。

<div data-role="panel" data-id="popover1" data-panel="popover" class="ui-element-fixed-top  ui-triangle-top 
     ui-mobile-viewport ui-panel ui-popover ui-panel-active ui-fixed-overlay" 
    status="hidden" style="top: 0px; display: none; width: 500px; height: 445px; right: 100px; margin-top: 45px;">
      <div class="popover_triangle"></div>

    <div data-role="page" data-show="first" id="popover1-1" data-url="popover1-1" tabindex="0" data-internal-page="true" >
        <div  class="ui-content" role="main" style="font-family: Georgia; font-weight:bold; ">              
            <div  class="ui-field-contain ui-body ui-br" style="height:50px" >
                <label for="email" class="ui-input-text" style="text-align: right">Email:</label>
                <input type="email" name="email" id="email" value="" 
                 class="ui-body-c ui-corner-all ui-shadow-inset" style="width: 340px">
              </div>
                    <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" style="height:50px">
            <label for="author" class="ui-input-text" style="text-align: right">Book author:</label>
            <input type="text" name="author" id="author" value="" 
            class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" style="width: 340px">
        </div>
        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" style="height:70px">
            <label for="title" class="ui-input-text" style="text-align: right">Book title:</label>
            <input type="text" name="title" id="title" value="" 
            class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" style="width: 340px">
        </div>

             <a href="docs-dialogs.html"  data-rel="back"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" 
                    class="closePanel ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all" id="btnSend" onclick="send();">
                    <span class="ui-btn-inner ui-btn-corner-all">
                    <span class="ui-btn-text">Send</span></span></a>       


                    <a href="docs-dialogs.html" data-role="button" data-rel="back"  data-corners="true" data-shadow="true" 
                    data-iconshadow="true" data-wrapperels="span" 
                    class="closePanel ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all"><span class="ui-btn-inner ui-btn-corner-all">
                    <span class="ui-btn-text">Cancel</span></span></a>    
    </div>
</div><!-- end page-->

Answer 1

我在这里面临同样的情况:

我们有一个 iPad 应用程序，它使用 iOS API 浏览器组件 (UIWebView) 来显示包含一组基于 Jquery、Jquerymobile 和 KineticJS 的工具的 html 页面。我们使用许多 jquery 小部件，主要是弹出窗口。

打开包含文本输入的特定弹出窗口时存在特定情况。弹出窗口在调用时按预期显示 - 然而，当用户触摸输入文本并且 iPad 的虚拟键盘显示时，弹出窗口就会消失。也可能它根本没有消失，而是以一种不再可见的方式“移动”了。

当我们通过 iPad 内置 Safari 浏览器测试页面时，不会发生这种情况。在这种情况下，弹出窗口行为正确，并被虚拟键盘稍微插入，但一旦键盘消失，弹出窗口就会返回到其初始位置。

我相信这在 iOS 7 及更高版本上开始 - 我记得在以前的 iOS 版本中使用它没有任何问题。

我使用 JQM 1.3.2 和 1.4.0 进行了测试。

JQM 团队正在解决这个问题:

https://github.com/jquery/jquery-mobile/issues/6961

<小时/>

解决方法更新:

仅在弹出窗口的“afteropen”事件中将 focus() 设置在弹出窗口中的输入文本上似乎可以解决这种情况，至少可以接受用户输入:弹出窗口和键盘都会显示正确并且用户可以输入...