Phonegap JQM固定位置頁眉/頁腳移動iOS鍵盤後移動

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); 
     });