IOS iPad Исправлено положение, когда клавиатура открыта

Ответ 1

Мне действительно нравится это решение (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
    });
}

EDIT: Удален ненужный элемент

Ответ 2

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

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

Ответ 3

Вот хакерское решение с использованием 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');
    });
});

Ответ 4

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

// Let 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

Ответ 5

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

Приветствия.

Ответ 6

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

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

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