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。我想我会发布这个解决方案以防万一它可以帮助别人。祝好运。：）

当键盘出现时，jQuery Mobile固定页脚正在移动

6 个答案: