iOS iPad фиксированное положение разрывается при открытии клавиатуры



фиксированные разрывы позиции на заголовке, когда я нажимаю на поле текстового поля "форма поиска". Он просто отсоединяется от верхней части страницы (как это зафиксировано там) и начинает плавать в середине страницы, когда виртуальная клавиатура открывается.

нормальный:

enter image description here

разбито:

enter image description here

151   7  

7 ответов:

Мне очень нравится это решение (http://dansajin.com/2012/12/07/fix-position-fixed/). я упаковал его в небольшой плагин jQuery, чтобы я мог:

  • установить, какой родитель получает класс
  • Установите, к каким элементам это относится (не забудьте "textarea"и " select").
  • установите имя родительского класса
  • позвольте ему быть прикованным
  • разрешить его использовать несколько раз

код пример:

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

правка: удален ненужный элемент

в нашем случае это будет исправлено, как только пользователь прокручивает. Итак, это исправление, которое мы использовали для имитации прокрутки:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

вот хаки решение с помощью jQuery:

HTML:

<label for="myField">My Field:</label> <input type="text" id="myField" />

<!-- ... other markup here .... -->

<div class="ad_wrapper">my fixed position container</div>

CSS:

.ad_wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
}
.unfixed {
    position: relative;
    left: auto;
    bottom: auto;
}

JS:

$(function () {
    adWrapper = $('.ad_wrapper');

    $(document).on('focusin', 'input, textarea', function() {
        adWrapper.addClass('unfixed');
    })
    .on('focusout', 'input, textarea', function () {
        adWrapper.removeClass('unfixed');
    });
});

все решения, которые я пробовал до сих пор не удалось один сценарий для меня: фиксированная верхняя панель навигации исчезнет, как только клавиатура отображается на iPhone. Что делать, если вы хотите, чтобы фиксированный элемент оставался фиксированным в том же положении, даже когда отображается клавиатура? Ниже приведено простое решение, которое позволяет это, с бонусом сохранения фиксированного элемента, прикрепленного к верхней части, когда вы прокручиваете страницу, пока клавиатура видна (т. е. с фокусом все еще внутри ввода поле.)

// Let's assume the fixed top navbar has id="navbar"
// Cache the fixed element
var $navbar = $('#navbar');

function fixFixedPosition() {
  $navbar.css({
    position: 'absolute',
    top: document.body.scrollTop + 'px'
  });
}
function resetFixedPosition() {
  $navbar.css({
    position: 'fixed',
    top: ''
  });
  $(document).off('scroll', updateScrollTop);
}
function updateScrollTop() {
  $navbar.css('top', document.body.scrollTop + 'px');
}

$('input, textarea, [contenteditable=true]').on({
  focus: function() {
    // NOTE: The delay is required.
    setTimeout(fixFixedPosition, 100);
    // Keep the fixed element absolutely positioned at the top
    // when the keyboard is visible
    $(document).scroll(updateScrollTop);
  },
  blur: resetFixedPosition
});

чтобы увидеть демо, перейдите сюда на вашем iPhone:

http://s.codepen.io/thdoan/debug/JWYQeN/gakeYJYOXDPk

вот версия с помощью requestAnimationFrame, но он, похоже, не работал лучше, поэтому я застрял с первой версией, так как это проще:

http://s.codepen.io/thdoan/debug/VpvJNX/yYMyLDLBwpRk

что вам нужно сделать, это установить положение тела фиксируется, когда пользователь редактирует текст, а затем восстановить его на статический, когда пользователь будет сделано. Вы можете сделать это либо при фокусировке/размытии (показано ниже), либо, если пользователь открывает модальный, вы можете сделать это при модальном открытии/закрытии.

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

исходя из этого хороший анализ из этой проблемы, я использовал это в html и body элементы в css:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

он отлично работает для меня.

исправлено-сделал Хак вокруг, чтобы подтолкнуть заголовок обратно в относительное положение фиксации после ввода текстового поля поиска. Это ошибка в реализации виртуальной клавиатуры iOS, поскольку она нарушает фиксированные позиции в текстовых полях, если страница прокручивается. Если переполнение скрыто / страница не прокручивается, то она не будет нарушать фиксированные позиции при выполнении виртуальной клавиатуры.

Ура.

    Ничего не найдено.

Добавить ответ:
Отменить.