jquery mobile在键盘时隐藏固定页脚答案

【问题标题】：jquery mobile hide fixed footer when keyboardjquery mobile在键盘时隐藏固定页脚
【发布时间】：2023-04-09 22:12:01
【问题描述】：

在我的 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() 以再次显示它:)

标签： jquery mobile keyboard hide footer

【解决方案1】：

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

经过反复试验，我想出了这个有趣的解决方案：

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility: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>#footer{visibility: 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>

【讨论】：

好的答案应该包括一些解释。