Перемещение верхнего / нижнего колонтитула Phonegap JQM с фиксированным положением после закрытия клавиатуры iOS

Я пытаюсь использовать JQM в проекте Phonegap для создания фиксированного верхнего и нижнего колонтитула в приложении 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>

cordova jquery header footer
person Sean    schedule 24.01.2012    source источник

Ответы (5)


arrow_upward
1
arrow_downward

У меня была аналогичная проблема, которую я исправил:

/* 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

person pablobart    schedule 19.10.2012

arrow_upward
0
arrow_downward

Взгляните на это решение.

Об этом сообщалось как об ошибке 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

person VicM    schedule 17.09.2013

arrow_upward
0
arrow_downward

Это сложная проблема, чтобы решить ее "правильно". Вы можете попытаться скрыть нижний колонтитул при фокусе элемента ввода и показать при размытии, но это не всегда надежно на iOS. Время от времени (один раз из десяти, скажем, на моем iPhone 4S) кажется, что событие focus не срабатывает (или, возможно, есть состояние гонки), и нижний колонтитул не скрывается.

После долгих проб и ошибок я пришел к следующему интересному решению:

<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», но ваш пробег может отличаться.

person Richard Kennard    schedule 12.09.2014

arrow_upward
0
arrow_downward

Лучшее решение, которое я нашел для этой проблемы, - использовать этот плагин: (размытие ввода не работает так хорошо)

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();
}
person eliprodigy    schedule 02.04.2015

arrow_upward
0
arrow_downward

Просто тестирую, работает.

         $(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);
         });
person Hesam    schedule 27.10.2015