Phonegap JQM перемещает верхний / нижний колонтитулы с фиксированным положением после исчезновения клавиатуры iOS - PullRequest
4 голосов
/ 24 января 2012

Я пытаюсь использовать 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>

Ответы [ 5 ]

1 голос
/ 19 октября 2012

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

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

0 голосов
/ 27 октября 2015

Я просто проверяю, все работает.

         $(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);
         });
0 голосов
/ 02 апреля 2015

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

ионно-плагинов-клавиатура

 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();
}
0 голосов
/ 13 сентября 2014

Это сложная проблема, чтобы получить «право».Вы можете попытаться скрыть нижний колонтитул на фокусе элемента ввода и показать размытость, но это не всегда надежно на 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, он гораздо быстрее и плавнее!

Примечание. Я обнаружил, что использование «видимости: скрыто» менее броско, чем «отображение: нет» или «позиция: статика», но вашпробег может варьироваться.

0 голосов
/ 17 сентября 2013

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

Это было сообщено как ошибка 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...