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

我设计了一个使用Phonegap和jQuery Mobile的应用程序。固定页脚正常工作，直到我点击下拉或文本字段，这会导致页脚从视图中消失（Android 4.0）或移动到视图中间（Android 2.2 Galaxy Tab）。有什么建议么？当键盘出现时jQuery Mobile固定页脚正在移动

PhoneGap的版本：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>

来源

2012-10-27 JavaH

你见过这里的类似问题的答案：http://stackoverflow.com/questions/6861764/jquery-mobile-stick-footer-to-bottom-of-page – Taifun

这里是我的解决方案问题 http://stackoverflow.com/questions/13097663/jquery-mobile-fixed-footer-is-moving-when-the-keyboard-appears/29415239#29415239 – eliprodigy

我有问题，一些设备页脚显示，并且在另没有。我发现这个工作对我来说：

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

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

来源

2012-11-01 11:46:32 gmh04

的IOS请参见http：//计算器。 com/questions/11600040/jquery-js-html5-change-page-content-when-keyboard-is-visible-on-mobile-devices – gmh04

这对我有用......谢谢！ –

我新离子如何使用此代码？我面临同样的问题@ gmh04 – Erum

好的，这个线程在这一点上和互联网一样老，但上面的答案似乎并没有为我做这项工作。

我发现最好的方法是结合了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); 
    } 
},

来源

2013-01-25 15:37:15

当我们有重点的输入，这样键盘打开：

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

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

来源

2013-04-26 07:44:55

尝试数据隐藏，在对焦=“”，并将其设置为空字符串。

来源

2014-03-19 14:15:01 mohan21

您好Mohan，您的答案似乎太小，以至于无法匹配Stackoverflow标准，如果您的答案始终详细（但非常重要）并且代码您希望有所帮助，那将会很好。 – Vasim

您也可以检测当键盘显示，当它隐藏和显示或隐藏相应的脚注：

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

来源

2014-06-25 11:33:42

我的解决方案使用的DIV页脚是另一个jQuery属性。将data-fullscreen =“true”添加到该div是我所需要的。我知道这个修补程序可能直到最近才可用，但我使用的是jqm 1.3.2和jq 1.9。我想我会发布这个解决方案，以防万一它有助于某人。祝你好运。 :)

来源

2015-10-01 17:31:32

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

回答

相关问题