Question

我正在尝试在Phonegap项目中使用JQM在iOS应用中创建固定的页眉和页脚。我有一个使用可折叠DIV的页面，它在DIV中有一个文本输入。页眉和页脚一切都很好，直到我展开DIV并在文本字段中输入内容。一旦我关闭iOS键盘，标题已向上移动并被iPhone“信息”栏覆盖，页脚也在页面上滑动，不再固定在底部。如果我在此之后展开另一个可折叠的DIV，则页脚会移回到正确的位置，但标题会保持从屏幕顶部覆盖。有什么想法发生了什么？

JQM页码：

<div data-role="page" id="wizard_3">
    <div data-role="header" class="header" data-id="cls_header">
      <h1>
        <label>Testing&reg;</label>
        testProgram&reg;</h1>
    </div>
    <div data-role="content">
      <div data-role="collapsible-set" id="ability_set">
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion1Header">XXXXXXX </h3>
          <p id="abilQuestion1Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability1" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion2Header">XXXXXXX</h3>
          <p id="abilQuestion2Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability2" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion3Header">XXXXXXX</h3>
          <p id="abilQuestion3Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability3" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion4Header">XXXXXXX</h3>
          <p id="abilQuestion4Textr">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability4" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion5Header">XXXXXXX</h3>
          <p id="abilQuestion5Text">XXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability5" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion">
          <h3 id="abilQuestion6Header">XXXXXXXX</h3>
          <p id="abilQuestion6Text">XXXXXXXX</p>
          <div data-role="fieldcontain" data-inline="true" class="ratingControls">
            <fieldset data-role="controlgroup">
              <input  type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
              <input type="text" id="ability6" class="assessNum"   value="0"/>
              <input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
    <div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer"  data-theme="b"> <span class="leftButton">
      <input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/>
      </span> <span class="rightButton">
      <input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/>
      </span> </div>
  </div>

Answer 1

我遇到了类似的问题：

/* iOS keyboard popup somehow leaves page scrolled, unscroll it */
$.mobile.silentScroll(0);

我在http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard

中找到了解决方案

Answer 2

看看这个解决方案。

这被报告为jQM错误，但它仍然在jQM 1.3.2中。

尝试这个适合我的解决方案，取自下面提到的主题。

// Workaround for buggy header/footer fixed position when virtual keyboard is on/off
$('input, textarea')
.on('focus', function (e) {
    $('header, footer').css('position', 'absolute');
})
.on('blur', function (e) {
    $('header, footer').css('position', 'fixed');
    //force page redraw to fix incorrectly positioned fixed elements
    setTimeout( function() {
        window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
    }, 20 );
});

此处发布了其他解决方案。这是一个值得寻找的线程： https://github.com/jquery/jquery-mobile/issues/5532

Answer 3

这是一个“正确”的难题。您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但在iOS上并不总是可靠。每隔一段时间（十次，例如，在我的iPhone 4S上），焦点事件似乎无法触发（或者可能存在竞争条件），并且页脚不会被隐藏。

经过多次反复试验，我想出了这个有趣的解决方案：

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

基本上：使用JavaScript确定设备的窗口高度，然后动态创建CSS媒体查询，以在窗口高度缩小10像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小，所以在iOS上永远不会失败。因为它使用的是CSS引擎而不是JavaScript，所以它更快更顺畅！

注意：我发现使用'visibility：hidden'比'display：none'或'position：static'更少，但你的里程可能会有所不同。

Answer 4

我发现此问题的最佳解决方案是使用此插件：（输入模糊效果不佳）

ionic-plugins-keyboard

 bindViewEvents: function () {
    var context = this;
    window.addEventListener('native.showkeyboard', context.keyboardShowHandler);

    window.addEventListener('native.hidekeyboard', context.keyboardHideHandler);
},
keyboardHideHandler: function (e) {
    var context = this;
    $(".ui-footer[data-role='footer']").show();
},
keyboardShowHandler: function (e) {
    var context = this;
    $(".ui-footer[data-role='footer']").hide();
}

Answer 5

我只是测试它，它有效。

         $(document).on('focus','input', function() {
         setTimeout(function() {
                    $('#footer1').css('position', 'absolute');
                    $('#header1').css('position', 'absolute');
         }, 0);
         });
         $(document).on('blur','input', function() {
         setTimeout(function() {
                               $('#footer1').css('position', 'fixed');
                               $('#header1').css('position', 'fixed');
         }, 800);
         });

解除iOS键盘后，Phonegap JQM固定位置页眉/页脚移动

5 个答案: