jQuery Mobile 固定页脚在键盘出现时移动答案

【问题标题】：jQuery Mobile fixed footer is moving when the keyboard appearsjQuery Mobile 固定页脚在键盘出现时移动
【发布时间】：2012-10-17 08:28:09
【问题描述】：

我使用 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>

【问题讨论】：

您是否在这里看到过类似问题的答案：stackoverflow.com/questions/6861764/…
这是我对问题的解决方案stackoverflow.com/questions/13097663/…

标签： android ios cordova jquery-mobile

【解决方案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
    }
});

容差导致横向高度与纵向宽度的不精确计算，反之亦然。

【讨论】：

IOS 见stackoverflow.com/questions/11600040/…
我是 ionic 新手，如何使用此代码？我面临同样的问题@gmh04

【解决方案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);
    }
},

【讨论】：

【解决方案3】：

当我们将焦点放在输入上时，键盘会打开：

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

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

【讨论】：

【解决方案4】：

您还可以检测键盘何时显示以及何时隐藏并相应地显示或隐藏您的页脚：

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

【讨论】：

【解决方案5】：

尝试 data-hide-during-focus="" 并将其设置为空字符串。

【讨论】：

嗨，Mohan，您的答案似乎太小而无法符合 Stackoverflow 标准，如果您的答案总是详细（但切中要害）并包含您希望对您有所帮助的代码，那就太好了。跨度>

【解决方案6】：

我的解决方案在 div 页脚上使用了另一个 JQUERY 属性。我只需要向该 div 添加 data-fullscreen="true" 即可。我知道这个修复可能直到最近才可用，但我使用的是 jqm 1.3.2 和 jq 1.9。我想我会发布这个解决方案，以防万一它对某人有帮助。祝你好运。 :)

【讨论】：