jQuery Mobile固定页脚在键盘出现时正在移动
我使用Phonegap和jQuery Mobiledevise了一个应用程序。 固定页脚正常工作，直到我点击下拉或文本字段，导致页脚从视图（Android 4.0）消失或移动到视图（Android 2.2 Galaxy Tab）的中间。 有什么build议么？
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> 我在某些设备中显示了页脚的问题，而在其他设备上则没有。 我发现这对我有用：
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 } });
公差是以纵向宽度来计算景观高度的不精确计算，反之亦然。
好的，这个线程在这个时候和互联网一样老，但是上面的答案似乎并没有为我做这个工作。
我发现的最好方法是将一个方法绑定到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); } },
当我们把注意力集中在一个input上时，键盘是打开的，所以：
// hide the footer when input is active $("input").blur(function() { $("[data-role=footer]").show(); }); $("input").focus(function() { $("[data-role=footer]").hide(); });
您还可以检测键盘显示的时间以及隐藏时间，并相应地显示或隐藏页脚：
document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false); document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);
尝试data-hide-during-focus =“”并将其设置为空string。
我的解决scheme使用div页脚上的另一个JQUERY属性。 将data-fullscreen =“true”添加到该div是我所需要的。 我知道这个修补程序可能直到最近才可用，但是我正在使用jqm 1.3.2和jq 1.9。 我想我会张贴这个解决scheme，以防万一它帮助某人。 祝你好运。 🙂