键盘时jquery mobile隐藏固定页脚
在我的iPhone上，我希望在按下文本字段并显示键盘时隐藏页脚。 现在它只是将自己定位在键盘上方，并且显示的网站太少。
这是一个“正确”的难题。 您可以尝试隐藏输入元素焦点上的页脚，并显示模糊，但这在iOS上并不总是可靠的。 每隔一段时间（十次，例如，在我的iPhone 4S上）焦点事件似乎无法触发（或者可能是JQuery Mobile存在竞争条件），并且页脚不会被隐藏。
经过多次试验和错误，我想出了这个有趣的解决方案：
...various JS and CSS imports...
基本上：使用JavaScript确定设备的窗口高度，然后动态创建一个CSS媒体查询，以便在窗口高度缩小10个像素时隐藏页脚。 因为打开键盘会调整浏览器显示的大小，所以在iOS上永远不会失败。 因为它使用的是CSS引擎而不是JavaScript，所以它更快更顺畅！
注意：我发现使用’visibility：hidden’比’display：none’或’position：static’更少，但你的里程可能会有所不同。
除了理查德的答案，它还可以处理iPhone上的两种方向：
PS我通过这个问题的隐藏评论来引导这个话题。
编辑：一些大括号丢失，所以这在景观中没有达到预期的效果。 现在修复了。
好方法。 它在很大程度上解决了我的问题。 我通过在方向更改上重写CSS来改进它。
这在我的应用程序中对我有用…
//hide footer when input box is on focus $(document).on('focus', 'input, textarea', function() { $("div[data-role=footer]").hide(); }); //show footer when input is NOT on focus $(document).on('blur', 'input, textarea', function() { $("div[data-role=footer]").show(); });
我发现一个更好的方法是检测输入或文本字段何时只关注iOS。
试试这个JS：
if(/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())) { $(document).on('focus', 'input, textarea', function() { $(".ui-footer").hide(); }); $(document).on('blur', 'input, textarea', function() { $(".ui-footer").show(); }); }