當鍵盤出現時，jQuery Mobile固定頁腳正在移動

Question

我使用Phonegap和jQuery Mobile設計了一個應用程序。 固定頁腳正常工作，直到我點擊下拉列表或文本字段，這會導致頁腳從視圖中消失（Android 4.0）或移動到視圖的中間（Android 2.2 Galaxy Tab）。 有什么建議？

Phonegap版本：Cordova 2.1.0
jQuery Mobile版本：1.2.0

這是我的代碼：

<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed">
  <div data-role="navbar" class="nav-mobilyzer" data-grid="d">
    <h1>footer</h1>        
  </div>
</div>

Answer 1

我在某些設備中顯示了頁腳顯示的問題而在其他設備中沒有顯示問題。 我發現這對我有用：

var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
    if(window.innerHeight < initialScreenSize){
        $("[data-role=footer]").hide();
    }
    else{
        $("[data-role=footer]").show();
    }
});

編輯：

但方向改變怎么樣？

var portraitScreenHeight;
var landscapeScreenHeight;

if(window.orientation === 0 || window.orientation === 180){
    portraitScreenHeight = $(window).height();
    landscapeScreenHeight = $(window).width();
}
else{
    portraitScreenHeight = $(window).width();
    landscapeScreenHeight = $(window).height();
}

var tolerance = 25;
$(window).bind('resize', function(){
    if((window.orientation === 0 || window.orientation === 180) &&
       ((window.innerHeight + tolerance) < portraitScreenHeight)){
        // keyboard visible in portrait
    }
    else if((window.innerHeight + tolerance) < landscapeScreenHeight){
        // keyboard visible in landscape
    }
    else{
        // keyboard NOT visible
    }
});

公差考慮了縱向高度與縱向寬度的不精確計算，反之亦然。

Answer 2

好的，此線程與此時的互聯網一樣古老，但上面的答案似乎並沒有為我做好工作。

我發現的最好方法是將方法綁定到jquery .blur（）事件，然后以非常特定的順序調用fixedtoolbar（）方法，即

    var that = this;
    $(':input').blur(function(){
        that.onFocusLoss();
    });

......

onFocusLoss : function() {
    try {
        $("[data-position='fixed']").fixedtoolbar();
        $("[data-position='fixed']").fixedtoolbar('destroy');
        $("[data-position='fixed']").fixedtoolbar();
        console.log('bam');
    } catch(e) {
        console.log(e);
    }
},

Answer 3

當我們關注輸入時鍵盤打開，所以：

// hide the footer when input is active
$("input").blur(function() {
    $("[data-role=footer]").show();
});

$("input").focus(function() {
    $("[data-role=footer]").hide();
});

Answer 4

您還可以檢測鍵盤何時顯示以及何時隱藏並顯示或隱藏您的頁腳：

document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false);
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);

Answer 5

嘗試data-hide-during-focus =“”並將其設置為空字符串。

Answer 6

我的解決方案在div頁腳上使用另一個JQUERY屬性。 將data-fullscreen =“true”添加到該div只是我需要的。 我知道這個修復程序可能直到最近才可用，但我使用的是jqm 1.3.2和jq 1.9。 我想我會發布這個解決方案以防萬一它可以幫助別人。 祝好運。 :)