jquery mobile在键盘时隐藏固定页脚
Posted
技术标签:
【中文标题】jquery mobile在键盘时隐藏固定页脚【英文标题】：jquery mobile hide fixed footer when keyboard 【发布时间】：2013-12-02 21:01:43 【问题描述】：在我的 iPhone 上，我希望在按下文本字段并出现键盘时隐藏页脚。现在它只是将自己定位在键盘上方，显示的网站太少。
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<div data-role="controlgroup" data-type="vertical">
<ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100' /></li>
</ul>
</div>
</div><!-- /navbar -->
</div><!-- /footer -->
【问题讨论】：
您无法检测到键盘何时显示。您所能做的就是检测输入元素何时具有焦点并将其隐藏。 我该怎么做？它似乎在 iPhone 上的 Safari 中运行良好，但不适用于 Chrome，当页面作为链接/应用程序添加到主屏幕时也不是。$("input").on("focus", function() $("div[data-role=footer]").hide(); ); 在模糊上做一个show() 以再次显示它:)
【参考方案1】：
这是一个很难“正确”的问题。您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但这在 ios 上并不总是可靠的。每隔一段时间（例如，在我的 iPhone 4S 上，有十分之一），焦点事件似乎无法触发（或者 JQuery Mobile 可能存在竞争条件），并且页脚没有被隐藏。
经过反复试验，我想出了这个有趣的解决方案：
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footervisibility:hidden@media(min-height:' + ($( window ).height() - 10) + 'px)#footervisibility:visible</style>' );
</script>
</head>
本质上：使用 JavaScript 确定设备的窗口高度，然后动态创建 CSS 媒体查询以在窗口高度缩小 10 像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小，所以这在 iOS 上永远不会失败。因为它使用的是 CSS 引擎而不是 JavaScript，所以它也更快更流畅！
注意：我发现使用 'visibility:hidden' 的故障比 'display:none' 或 'position:static' 少，但您的里程可能会有所不同。
【讨论】：
它在 iPhone 上的 Safari 中似乎可以正常工作，但在 Chrome 中以及当页面作为链接/应用程序添加到主屏幕时就不行。 干得好！我认为它不会处理方向变化，但我确信这很容易解决。 方向是一个问题，是的 - 但它会在新页面加载/刷新时自行修复。 @user2996395 在 iOS (v31.0.1650.18) 和主屏幕链接/应用程序上测试了 Chrome：它们对我有用吗？我已经注意到有时很难让 iOS 刷新其页面缓存。也许您缓存了旧版本？【参考方案2】：除了 Richard 的回答之外，这可以处理 iPhone 上的两个方向：
<script type="text/javascript">
var win = $(window),
height = win.height(),
width = win.width();
document.write([
"<style>",
".ui-footer-fixed visibility: hidden; ",
"@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px)",
" .ui-footer-fixed visibility: visible; ",
"@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px)",
" .ui-footer-fixed visibility: visible; ",
"</style>"
].join(" "));
</script>
附： 我被一个隐藏的评论表单 this question 引导到这个话题。
编辑：缺少一些大括号，因此在横向时没有达到预期的效果。现已修复。
【讨论】：
如果您在使用网站时不更改视图，这将非常有效。从纵向到横向，将使页脚消失。我需要一直显示页脚，除非键盘打开...你能帮忙吗？ 嗨，您的代码非常适合虚拟 qwerty 键盘，当数字键盘在方向屏幕上显示时，页脚仍然可见，需要帮助 Pauli，哪个设备？我主要在 iPhone 5 上对此进行了测试。也许您可以尝试调整 (Math.max(width, height) - 10) 表达式中的常量。【参考方案3】：这对我的整个应用程序都有效...
//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();
);
【讨论】：
【参考方案4】：很棒的方法。 它在很大程度上解决了我的问题。 我通过在方向更改上重写 CSS 来改进它。
<script type="text/javascript">
window.addEventListener("orientationchange", function()
// rewrite CSS when the user rotates the device
setFooterVisibility();
, false);
$(document).ready(function()
// write CSS for the first time when the browser is ready
setFooterVisibility();
);
function setFooterVisibility()
var win = $(window),
height = win.height(),
width = win.width();
$('#styles').html("<style>#footervisibility: hidden;@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px) #footer visibility: visible; @media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px) #footer visibility: visible; </style>");
</script>
<!-- put this line anywhere in the body -->
<div id='styles'></div>
【讨论】：
【参考方案5】：我发现一个更好的方法是检测输入或文本字段何时仅关注 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();
);
【讨论】：
【参考方案6】：<script>
jQuery(document).ready(function()
jQuery("input[type='text']").focus(function ()
jQuery("#page-fixed-footer").hide();
);
jQuery("input[type='text']").focusout(function ()
jQuery("#page-fixed-footer").show();
);
);
</script>
【讨论】：
好的答案应该包括一些解释。以上是关于jquery mobile在键盘时隐藏固定页脚的主要内容，如果未能解决你的问题，请参考以下文章