Question

在我的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 -->

Answer 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'更少，但你的里程可能会有所不同。

Answer 2

根据理查德的回答，这可以处理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>

P.S。我通过隐藏的评论表单this question引导了这个主题。

编辑：有些大括号丢失了，因此在横向拍摄时效果并不理想。现在修好了。

Answer 3

很好的方法。它在很大程度上解决了我的问题。我通过在方向更改上重写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>

Answer 4

这适用于我的整个应用......

//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();
});

Answer 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();
    });
}

Answer 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手机隐藏固定页脚键盘时

6 个答案: