iOS 5 фіксованого позиціонування та віртуальної клавіатури

У мене є веб-сайт для мобільних пристроїв, на якому було закріплено поділ у нижній частині екрана за допомогою положення: fix. Все працює добре в iOS 5 (я тестую на iPod Touch), поки я не перейду на сторінку з формою. Коли я натискаю на поле введення і з'являється віртуальна клавіатура, раптом фіксоване положення мого діва втрачається. Зараз div прокручується сторінкою до тих пір, поки видно клавіатуру. Після натискання кнопки Готово, щоб закрити клавіатуру, діва повертається до свого положення в нижній частині екрана і підкоряється правилу позиції: фіксований.

Хтось ще відчував подібну поведінку? Це очікується? Дякую.

У мене була проблема в моїй заяві. Ось як я працюю над цим:

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

Я просто прокручую вгору і розміщую його там, тож користувач iOS не помічає нічого дивного. Запишіть це в деяке виявлення агента користувача, щоб інші користувачі не мали такої поведінки.

У мене була дещо інша проблема в ipad, коли віртуальна клавіатура підштовхувала мій вікно перегляду вгору за межі екрана. Тоді після закриття користувачем віртуальної клавіатури мій вікно перегляду все ще залишався поза екраном. У моєму випадку я зробив щось на кшталт наступного:

var el = document.getElementById('someInputElement');
function blurInput() {
    window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);

Це код, який ми використовуємо для вирішення проблеми з ipad. Це в основному виявляє розбіжності між зміщенням і позицією прокрутки - це означає, що "фіксований" працює неправильно.

$(window).bind('scroll', function () {
    var $nav = $(".navbar")
    var scrollTop = $(window).scrollTop();
    var offsetTop = $nav.offset().top;

    if (Math.abs(scrollTop - offsetTop) > 1) {
        $nav.css('position', 'absolute');
        setTimeout(function(){
            $nav.css('position', 'fixed');
        }, 1);
    }
});

Елементи фіксованого положення просто не оновлюють своє положення, коли клавіатура піднята. Я виявив, що, обдуривши Safari, думаючи, що сторінка змінила розмір, елементи, як і раніше, зміняться. Це не ідеально, але принаймні вам не потрібно турбуватися про перехід на позицію: абсолютну та відстеження змін.

Наступний код просто слухає, коли користувач, ймовірно, використовує клавіатуру (через фокусування вводу), і, поки не почує розмиття, він просто слухає будь-які події прокрутки, а потім робить фокус зміни розміру. Здається, поки що для мене це працює досить добре.

    var needsScrollUpdate = false;
    $(document).scroll(function(){
        if(needsScrollUpdate) {
            setTimeout(function() {
                $("body").css("height", "+=1").css("height", "-=1");
            }, 0);
        }
    });
    $("input, textarea").live("focus", function(e) {
        needsScrollUpdate = true;
    });

    $("input, textarea").live("blur", function(e) {
        needsScrollUpdate = false;
    });

На всякий випадок, якщо хтось трапиться з цією темою, як я це робив під час дослідження цього питання. Я вважав цю тему корисною для стимулювання свого мислення з цього питання.

Це було моїм рішенням щодо недавнього проекту. Вам просто потрібно змінити значення "targetElem" на селектор jQuery, який представляє ваш заголовок.

if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
      targetElem: $('#fooSelector'),
      init: (function(){
        $("input, textarea").on("focus", function() {
          iOSKeyboardFix.bind();
        });
      })(),

      bind: function(){
            $(document).on('scroll', iOSKeyboardFix.react);  
                 iOSKeyboardFix.react();      
      },

      react: function(){

              var offsetX  = iOSKeyboardFix.targetElem.offset().top;
              var scrollX = $(window).scrollTop();
              var changeX = offsetX - scrollX; 

              iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

              $('input, textarea').on('blur', iOSKeyboardFix.undo);

              $(document).on('touchstart', iOSKeyboardFix.undo);
      },

      undo: function(){

          iOSKeyboardFix.targetElem.removeAttr('style');
          document.activeElement.blur();
          $(document).off('scroll',iOSKeyboardFix.react);
          $(document).off('touchstart', iOSKeyboardFix.undo);
          $('input, textarea').off('blur', iOSKeyboardFix.undo);
      }
};

};

Існує трохи затримки з виправленням виправлення, тому що iOS зупиняє DOM-маніпуляції під час прокрутки, але це робить трюк ...

Жоден з інших відповідей, які я знайшов для цієї помилки, не працював на мене. Мені вдалося це виправити, просто прокрутивши сторінку назад на 34 пікселі, кількість мобільного сафарі прокручує її. з jquery:

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

Це, очевидно, почне діяти у всіх браузерах, але запобігає його злому в iOS.

Це питання насправді дратує.

Я поєднав деякі з вищезгаданих методик і придумав це:

$(document).on('focus', 'input, textarea', function() {
    $('.YOUR-FIXED-DIV').css('position', 'static');
});

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        $('.YOUR-FIXED-DIV').css('position', 'fixed');
        $('body').css('height', '+=1').css('height', '-=1');
    }, 100);
});

У мене є два фіксованих навігаційних панелі (колонтитул та нижній колонтитул, використовуючи завантажувальну систему twitter). Обидва діяли дивно, коли клавіатура піднялася, і знову дивно після того, як клавіатура не працює.

З цим приуроченим / затриманим виправленням воно працює. Я все одно час від часу знаходжу проблему, але, здається, це досить добре, щоб показати її клієнту.

Повідомте мене, чи працює це для вас. Якщо ні, то ми можемо знайти щось інше. Дякую.

У мене виникла така ж проблема з iOS7. Фіксовані знизу елементи зіпсували б мій погляд, не зосередившись належним чином.

Все почало працювати, коли я додав цей метатег до свого HTML.

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height" >

Частина, яка змінила:

height=device-height

Сподіваюся, що хтось допомагає.

Я прийняв Jory Cunninghamвідповідь і вдосконалив її:

У багатьох випадках божеволіє не один елемент, а декілька фіксованих позиціонованих елементів, тому в цьому випадку targetElemповинен бути об’єкт jQuery, у якому є всі нерухомі елементи, які ви хочете «виправити». Хоча, це, здається, змушує клавіатуру iOS піти, якщо прокрутити ...

Зайве згадувати, що ви повинні використовувати цей ПОСЛІДDOM ready події документа або безпосередньо перед закриваючим </body>тегом.

(function(){
    var targetElem = $('.fixedElement'), // or more than one
        $doc       = $(document),
        offsetY, scrollY, changeY;

    if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
        return;

    $doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);

    function bind(){
        $(window).on('scroll.iOSKeyboardFix', react);
        react();
    }

    function react(){
        offsetY = targetElem.offset().top;
        scrollY = $(window).scrollTop();
        changeY = offsetY - scrollY;

        targetElem.css({'top':'-'+ changeY +'px'});

        // Instead of the above, I personally just do:
        // targetElem.css('opacity', 0);

        $doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
            .on('touchend.iOSKeyboardFix', unbind);
    }

    function unbind(){
        targetElem.removeAttr('style');
        document.activeElement.blur();

        $(window).off('scroll.iOSKeyboardFix');
        $doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
    }
})();

У мене є рішення, подібне до @NealJMD, за винятком того, що моє виконується лише для iOS і правильно визначає зміщення прокрутки, вимірюючи scollTop до та після прокрутки на рідній клавіатурі, а також використовуючи setTimeout, щоб дозволити відбуватися нативної прокрутки:

var $window = $(window);
var initialScroll = $window.scrollTop();
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
  setTimeout(function () {
    $window.scrollTop($window.scrollTop() + (initialScroll - $window.scrollTop()));
  }, 0);
}

Я зафіксував фіксовану позицію мого основного вмісту Ipad таким чином:

var mainHeight;
var main = $('.main');

// hack to detects the virtual keyboard close action and fix the layout bug of fixed elements not being re-flowed
function mainHeightChanged() {
    $('body').scrollTop(0);
}

window.setInterval(function () {
    if (mainHeight !== main.height())mainHeightChanged();
    mainHeight = main.height();
}, 100);

У мене була схожа проблема з @ ds111 s. Мій веб-сайт був висунутий клавіатурою, але він не рухався вниз, коли клавіатура закрилася.

Спочатку я спробував рішення @ ds111, але у мене було два inputполя. Звичайно, спочатку клавіатура відходить, потім відбувається розмиття (або щось подібне). Тож другий inputопинився під клавіатурою, коли фокус перейшов безпосередньо з одного входу на інший.

Крім того, «стрибок вгору» був для мене недостатньо хорошим, оскільки вся сторінка має розмір лише ipad. Тому я зробив сувій гладким.

Нарешті, мені довелося приєднати слухача події до всіх вхідних даних, навіть тих, які наразі були прихованими, отже, і live.

Всі разом я можу пояснити наступний фрагмент JavaScript як: Приєднайте наступного слухача розмиття до поточного та всього майбутнього inputі textarea(= live): Зачекайте пільгового періоду (= window.setTimeout(..., 10)) і плавно прокрутіть до вершини (= animate({scrollTop: 0}, ...)), але тільки якщо "жодна клавіатура не показано "(= if($('input:focus, textarea:focus').length == 0)).

$('input, textarea').live('blur', function(event) {
    window.setTimeout(function() {
        if($('input:focus, textarea:focus').length == 0) {
            $("html, body").animate({ scrollTop: 0 }, 400);
        }
    }, 10)
})

Пам’ятайте, що період піктограми (= 10) може бути занадто коротким або клавіатура все ще може відображатися, хоча немає inputабо textareaзосереджена. Звичайно, якщо ви хочете прокручувати швидше або повільніше, ви можете скорегувати тривалість (= 400)

дійсно наполегливо працював над тим, щоб знайти це рішення, яке, коротше, шукає фокус і розмиття подій на входах, і прокручування, щоб вибірково змінити позиціонування фіксованої смуги, коли події відбуваються. Це куленепроникний і охоплює всі випадки (навігація за допомогою кнопки <>, прокрутка, кнопка done). Note id = "nav" - це мій діловий фіксований колонтитул. Ви можете легко перенести це до стандартного js або jquery. Це доджо для тих, хто використовує електроінструменти ;-)

define (["dojo / ready", "dojo / query",], функція (готовий, запит) {

ready(function(){

    /* This addresses the dreaded "fixed footer floating when focusing inputs and keybard is shown" on iphone 
     * 
     */
    if(navigator.userAgent.match(/iPhone/i)){
        var allInputs = query('input,textarea,select');
        var d = document, navEl = "nav";
        allInputs.on('focus', function(el){
             d.getElementById(navEl).style.position = "static";
        });

        var fixFooter = function(){
            if(d.activeElement.tagName == "BODY"){
                d.getElementById(navEl).style.position = "fixed";
            }
        };
        allInputs.on('blur', fixFooter);
        var b = d.body;
        b.addEventListener("touchend", fixFooter );
    }

});

}); // кінцеве визначення

Це складна проблема отримати «правильно». Ви можете спробувати приховати колонтитул на фокусі вхідних елементів і показати розмиття, але це не завжди надійно в iOS. Кожен так часто (раз на десять, скажімо, на моєму iPhone 4S) фокус події, здається, не спрацьовує (або, можливо, є гоночна умова), і колонтитул не приховується.

Після багатьох спроб і помилок я придумав таке цікаве рішення:

<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, він набагато швидший і плавніший!

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

Працює для мене

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}

У нашому випадку це виправить себе, як тільки користувач прокручує. Отже, це виправлення, яке ми використовуємо для імітації прокрутки blurна будь-якому inputабо textarea:

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

Моя відповідь - це неможливо зробити.

Я бачу 25 відповідей, але в моєму випадку жодна робота не працює. Ось чому Yahoo та інші сторінки приховують фіксований заголовок, коли клавіатура ввімкнена. І Bing перетворює всю сторінку, яку не можна прокручувати (overflow-y: приховано).

Випадки, про які йшлося вище, різні, деякі мають проблеми під час прокрутки, деякі - у фокусі чи розмитті. Деякі мають фіксований нижній колонтитул або заголовок. Я не можу перевірити кожну комбінацію, але ви, можливо, зрозумієте, що це не можна зробити у вашому випадку.

Знайшов це рішення на Github.

https://github.com/Simbul/baker/isissue/504#issuecomment-12821392

Переконайтеся, що у вас вміст, який можна прокручувати

// put in your .js file
$(window).load(function(){
    window.scrollTo(0, 1);
});

// min-height set for scrollable content
<div id="wrap" style="min-height: 480px">
  // website goes here
</div>

Адресний рядок складається як додатковий бонус.

У випадку, якщо хтось захотів спробувати це. У мене з’явилося наступне, що працює для мене на фіксованому колонтитулі з вхідним полем.

<script>
    $('document').ready(
        function() {
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
                  || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();

                $('#notes').live('focus', function() {
                    if (documentHeight > windowHeight) {
                        $('#controlsContainer').css({
                            position : 'absolute'
                        });
                        $("html, body").animate({
                            scrollTop : $(document).height()
                        }, 1);
                    }
                });
                $('#notes').live('blur', function() {
                    $('#controlsContainer').css({
                        position : 'fixed'
                    });
                    $("html, body").animate({
                        scrollTop : 0
                    }, 1);
                });
            }
        });
</script>

У мене те саме питання. Але я зрозумів, що фіксована позиція просто затримується і не порушується (принаймні для мене). Зачекайте 5-10 секунд і подивіться, чи діва пристосовується до нижньої частини екрана. Я вважаю, що це не помилка, а затримка відповіді, коли клавіатура відкрита.

Я спробував усі підходи з цієї теми, але якщо вони не допомогли, вони зробили ще гірше. Зрештою, я вирішив змусити пристрій втратити фокус:

$(<selector to your input field>).focus(function(){
    var $this = $(this);
    if (<user agent target check>) {
        function removeFocus () {
            $(<selector to some different interactive element>).focus();
            $(window).off('resize', removeFocus);
        }
        $(window).on('resize', removeFocus);
    }
});

і це спрацювало як шарм і зафіксувало мою липку форму для входу.

Зверніть увагу:

1. Код JS, наведений вище, полягає лише в тому, щоб представити мою ідею, щоб виконати цей фрагмент, будь ласка, замініть значення у кутових дужках (<>) на відповідні значення для вашої ситуації.
2. Цей код призначений для роботи jQuery v1.10.2

Це все ще велика помилка для будь-яких HTML-сторінок із більш високими режимами Bootstrap в iOS 8.3. Жодне із запропонованих вище рішень не працювало і після збільшення масштабу в будь-якому полі нижче складки високого модалу Mobile Safari та / або WkWebView не перемістить фіксовані елементи туди, де розташований прокрутка HTML-тіла, не залишаючи їх нерівними з тим, де вони є насправді де виклав.

Щоб вирішити помилку, додайте слухача подій до будь-якого з модальних входів, таких як:

$(select.modal).blur(function(){
  $('body').scrollTop(0);
});

Я здогадуюсь, що це працює, тому що змушуючи висоту прокрутки HTML-тіла, вирівнюється фактичний вигляд із тим, де iOS 8 WebView очікує вміст фіксованого модального дива.

Якщо хтось шукав зовсім інший маршрут (наприклад, ви навіть не хочете зафіксувати цей «колонтитул») під час прокрутки, але ви просто хочете, щоб div залишився внизу сторінки, ви можете просто встановити положення нижнього колонтитула як відносний.

Це означає, що навіть якщо віртуальна клавіатура з’явиться на вашому мобільному браузері, ваш нижній колонтитул буде просто прив’язаний донизу сторінки, не намагаючись реагувати на показ віртуальної клавіатури чи закрити.

Очевидно, що на Safari краще виглядає, якщо положення виправлене, а нижній колонтитул слідкує за сторінкою, коли ви прокручуєте вгору чи вниз, але через цю дивну помилку в Chrome ми закінчилися перемиканням на просто перетворення нижнього колонтитула.

Жодне з прокручувальних рішень мені не здавалось. Натомість те, що працювало, - це встановити положення тіла у фіксованому, коли користувач редагує текст, а потім відновити його до статичного, коли користувач виконано. Це не дозволяє сафарі прокручувати ваш вміст. Це можна зробити або на фокусі / розмитті елементів (показано нижче для одного елемента, але може бути для всіх вхідних даних, текстових областей), або якщо користувач щось робить для того, щоб почати редагувати, як-от відкрити модальний, ви можете це зробити він на цю дію (наприклад, модальний відкрити / закрити).

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

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

iOS9 - та сама проблема.

TLDR - джерело проблеми. Для розв’язання прокрутіть донизу

У мене була форма в position:fixed iframe з id = 'підписатися-спливаючий кадр'

Відповідно до оригінального питання, при фокусуванні на введенні кадр iframe піде вгору документа на відміну від верхньої частини екрана.

Така ж проблема не виникала в режимі safari dev з користувальницьким агентом, встановленим на ідевік. Тож здається, що проблема викликана віртуальною клавіатурою iOS, коли вона з'являється.

Я отримав певну видимість того, що відбувається, консоліруючи реєстрацію позиції iframe (наприклад $('#subscribe-popup-frame', window.parent.document).position()), і звідти я міг бачити, як iOS, здавалося, встановлює положення елемента, {top: -x, left: 0}коли віртуальна клавіатура вискакує (тобто фокусується на вхідному елементі).

Тож моє рішення полягало в тому, щоб взяти цей примхливий -x, перевернути знак і потім використати jQuery, щоб додати цю topпозицію до iframe. Якщо є краще рішення, я б хотів його почути, але, спробувавши десяток різних підходів, це єдине, що працювало на мене.

Недолік: мені потрібно було встановити тайм-аут у 500 мс (можливо, менше би спрацювало, але я хотів бути в безпеці), щоб переконатися, що я захопив остаточне xзначення після того, як iOS зробив свою помилку з положенням елемента. Як результат, досвід дуже хиткий. . . але принаймні це працює

Рішення

        var mobileInputReposition = function(){
             //if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
            if(screen.width < 769){
                setTimeout(function(){
                    var parentFrame = $('#subscribe-popup-frame',window.parent.document);
                    var parentFramePosFull = parentFrame.position();
                    var parentFramePosFlip = parentFramePosFull['top'] * -1;
                    parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
                },500);
            }    
        }   

Тоді просто зателефонуйте mobileInputRepositionв щось подібне $('your-input-field).focus(function(){})і$('your-input-field).blur(function(){})