JQuery Mobile скрыть фиксированный нижний колонтитул, когда клавиатура

На моем 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 -->
Источник

5 ответов

Это сложная проблема, чтобы получить "право". Вы можете попытаться скрыть нижний колонтитул на фокусе элемента ввода и показать размытость, но это не всегда надежно для 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, он гораздо быстрее и плавнее!

Примечание: я обнаружил, что использование "видимости: скрытый" менее затруднительно, чем "отображение: нет" или "позиция: статическая", но ваш пробег может отличаться.

Источник

Это работает для меня на протяжении всего моего приложения...

//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();
});
Источник

В дополнение к ответу Ричарда, это обрабатывает обе ориентации на 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>

PS Меня привел к этой теме скрытый комментарий от этого вопроса.

РЕДАКТИРОВАТЬ: некоторые фигурные скобки отсутствовали, так что это не имело желаемого эффекта, когда в ландшафте. Исправлено сейчас.

Источник

Отличный подход. Это решило мою проблему по большей части. Я улучшил это, переписав 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>
Источник

Гораздо лучший подход, который я нашел, состоял в том, чтобы обнаружить, когда поле ввода или текстовое поле сосредоточено только на 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();
    });
}
Источник 
<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>
Источник
Другие вопросы по тегам