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）显示一个html页面，其中包含一组基于Jquery，Jquerymobile和KineticJS的工具。我们使用了许多jquery小部件，主要是弹出窗口。

打开包含文本输入的特定弹出窗口时会出现特定情况。弹出窗口在调用时按预期显示 - 但是，当用户触摸输入文本并显示iPad的虚拟键盘时，弹出窗口消失。也许它根本不会消失，而是以一种无法再看的方式“移动”。

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

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

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

JQM团队正在研究这个问题：

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

替代方法更新：

在弹出窗口中的输入文本上设置焦点（），就在弹出窗口的“afteropen”事件中似乎可以解决这种情况，至少可以接受用户输入：弹出窗口和键盘都会显示正确，用户可以输入...

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

1 个答案: