解除iOS键盘后，Phonegap JQM固定位置页眉/页脚移动

我试图在Phonegap项目中使用JQM在iOS应用程序中创建固定的页眉和页脚。 我有一个使用可折叠DIV的页面，它在DIV中有一个文本输入。 页眉和页脚一切都很好，直到我展开DIV并在文本字段中输入内容。 一旦我关闭iOS键盘，标题已向上移动并被iPhone“信息”栏覆盖，页脚也在页面上滑动，不再固定在底部。 如果我在此之后展开另一个可折叠的DIV，则页脚移回到正确的位置，但是页眉保持覆盖在屏幕顶部之外。 有什么想法发生了什么？

JQM页码：

 
 
 Testing® testProgram®
 
 
 
 
 
XXXXXXX 
 
XXXXXXX
 
 
    
 
 
 
 
XXXXXXX
 
XXXXXXX
 
 
    
 
 
 
 
XXXXXXX
 
XXXXXXX
 
 
    
 
 
 
 
XXXXXXX
 
XXXXXXX
 
 
    
 
 
 
 
XXXXXXX
 
XXXXXXX
 
 
    
 
 
 
 
XXXXXXXX
 
XXXXXXXX
 
 
    
 
 
 
 
 
       
  

Answer 1

我遇到了类似的问题：

 /* iOS keyboard popup somehow leaves page scrolled, unscroll it */ $.mobile.silentScroll(0); 

我在http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard找到了解决方案

Answer 2

看看这个解决方案。

这被报告为jQM错误但它仍然在jQM 1.3.2中。

尝试这个适合我的解决方案，取自下面提到的线程。

 // Workaround for buggy header/footer fixed position when virtual keyboard is on/off $('input, textarea') .on('focus', function (e) { $('header, footer').css('position', 'absolute'); }) .on('blur', function (e) { $('header, footer').css('position', 'fixed'); //force page redraw to fix incorrectly positioned fixed elements setTimeout( function() { window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() ); }, 20 ); }); 

其他解决方案发布在这里。 这是一个值得一看的线程： https ： //github.com/jquery/jquery-mobile/issues/5532

Answer 3

这是一个“正确”的难题。 您可以尝试隐藏输入元素焦点上的页脚，并显示模糊，但这在iOS上并不总是可靠的。 每隔一段时间（十次，例如，在我的iPhone 4S上）焦点事件似乎无法触发（或者可能存在竞争条件），并且页脚不会被隐藏。

经过多次试验和错误，我想出了这个有趣的解决方案：

  ...various JS and CSS imports...   

基本上：使用JavaScript确定设备的窗口高度，然后动态创建一个CSS媒体查询，以便在窗口高度缩小10个像素时隐藏页脚。 因为打开键盘会调整浏览器显示的大小，所以在iOS上永远不会失败。 因为它使用的是CSS引擎而不是JavaScript，所以它更快更顺畅！

注意：我发现使用’visibility：hidden’比’display：none’或’position：static’更少，但你的里程可能会有所不同。

Answer 4

我发现这个问题的最佳解决方案是使用这个插件:(输入模糊效果不好）

离子-插件键盘

  bindViewEvents: function () { var context = this; window.addEventListener('native.showkeyboard', context.keyboardShowHandler); window.addEventListener('native.hidekeyboard', context.keyboardHideHandler); }, keyboardHideHandler: function (e) { var context = this; $(".ui-footer[data-role='footer']").show(); }, keyboardShowHandler: function (e) { var context = this; $(".ui-footer[data-role='footer']").hide(); } 

Answer 5

我只是测试它，它的工作原理。

  $(document).on('focus','input', function() { setTimeout(function() { $('#footer1').css('position', 'absolute'); $('#header1').css('position', 'absolute'); }, 0); }); $(document).on('blur','input', function() { setTimeout(function() { $('#footer1').css('position', 'fixed'); $('#header1').css('position', 'fixed'); }, 800); });