Phonegap JQM固定位置头/页脚在关闭iOS键盘后移动

问题描述

我想在Phonegap项目中使用JQM在iOS应用程序中创建固定的页眉和页脚。我有一个页面使用可折叠DIV，它有一个文本输入内的DIV。一切都很好与标题和页脚，直到我展开DIV和输入的东西到文本字段。一旦我关闭iOS键盘的标题已经向上移动，并被iPhone的信息栏覆盖，页脚也在页面上滑，不再固定在底部。如果我展开另一个可折叠的DIV后，页脚移回到正确的位置，但标题保持重叠在屏幕的顶部。任何想法是怎么回事？

I am trying to use JQM in a Phonegap project to create a fixed header and footer in an iOS app. I have a page that uses collapsable DIVs and it has a text input inside the DIV. Everything is fine with the header and footer until I expand the DIV and input something into the text field. Once I dismiss the iOS keyboard the header has moved up and is overlaid by the iPhones "information" bar, and the footer has also slid up on the page and is no longer fixed to the bottom. If I expand another collapsible DIV after this the footer moves back into the correct location, but the header stays overlaid off the top of the screen. Any ideas what is going on?

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>

推荐答案

我有一个类似的问题， / p>

I had a similar problem I fixed with this:

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

我在

这篇关于Phonegap JQM固定位置头/页脚在关闭iOS键盘后移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！