iOS 5 feste Positionierung und virtuelle Tastatur

Ich habe eine mobile Website, deren Div über Position am unteren Bildschirmrand befestigt ist: behoben. In iOS 5 (ich teste auf einem iPod Touch) funktioniert alles einwandfrei, bis ich auf einer Seite mit einem Formular bin. Wenn ich auf ein Eingabefeld tippe und die virtuelle Tastatur angezeigt wird, geht plötzlich die feste Position meines Div verloren. Das div scrollt jetzt mit der Seite, solange die Tastatur sichtbar ist. Sobald ich auf Fertig klicke, um die Tastatur zu schließen, kehrt der Div zu seiner Position am unteren Bildschirmrand zurück und befolgt die Position: Feste Regel.

Hat jemand anderes diese Art von Verhalten erlebt? Wird das erwartet? Vielen Dank.

Ich hatte dieses Problem in meiner Bewerbung. So arbeite ich daran:

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

Ich scrolle nur nach oben und positioniere es dort, damit der iOS-Benutzer nichts Merkwürdiges bemerkt. Schließen Sie dies in die Erkennung von Benutzeragenten ein, damit andere Benutzer dieses Verhalten nicht erhalten.

Ich hatte ein etwas anderes iPad-Problem, bei dem die virtuelle Tastatur mein Ansichtsfenster außerhalb des Bildschirms nach oben schob. Nachdem der Benutzer die virtuelle Tastatur geschlossen hatte, befand sich mein Ansichtsfenster immer noch außerhalb des Bildschirms. In meinem Fall habe ich so etwas gemacht:

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

Dies ist der Code, mit dem wir das Problem mit dem iPad beheben. Grundsätzlich werden Diskrepanzen zwischen Versatz und Bildlaufposition erkannt - was bedeutet, dass "fest" nicht richtig funktioniert.

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

Die positionfesten Elemente aktualisieren ihre Position einfach nicht, wenn die Tastatur geöffnet ist. Ich habe festgestellt, dass sich die Elemente neu positionieren, wenn Safari zu der Annahme verleitet wird, dass die Größe der Seite geändert wurde. Es ist nicht perfekt, aber zumindest müssen Sie sich keine Gedanken darüber machen, ob Sie in die Position „absolut:“ wechseln und Änderungen selbst verfolgen.

Der folgende Code wartet nur darauf, wann der Benutzer wahrscheinlich die Tastatur verwendet (aufgrund einer fokussierten Eingabe), und bis er eine Unschärfe hört, wartet er nur auf Bildlaufereignisse und führt dann den Größenänderungstrick aus. Scheint bisher ziemlich gut für mich zu funktionieren.

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

Nur für den Fall, dass jemand auf diesen Thread stößt, wie ich es bei der Untersuchung dieses Problems getan habe. Ich fand diesen Thread hilfreich, um mein Denken zu diesem Thema anzuregen.

Dies war meine Lösung für ein aktuelles Projekt. Sie müssen nur den Wert von "targetElem" in einen jQuery-Selektor ändern, der Ihren Header darstellt.

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

};

Es gibt eine kleine Verzögerung bei der Korrektur, da iOS die DOM-Manipulation stoppt, während es gescrollt wird, aber es macht den Trick ...

Keine der anderen Antworten, die ich für diesen Fehler gefunden habe, hat für mich funktioniert. Ich konnte es einfach beheben, indem ich die Seite um 34 Pixel nach oben scrollte. Der Betrag, um den die mobile Safari nach unten scrollt. mit jquery:

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

Dies wird natürlich in allen Browsern wirksam, verhindert jedoch, dass es in iOS kaputt geht.

Dieses Problem ist wirklich ärgerlich.

Ich habe einige der oben genannten Techniken kombiniert und mir Folgendes ausgedacht:

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

Ich habe zwei feste Navigationsleisten (Kopf- und Fußzeile mit Twitter-Bootstrap). Beide verhielten sich seltsam, wenn die Tastatur hoch und wieder komisch, wenn die Tastatur heruntergefahren ist.

Mit diesem zeitgesteuerten / verzögerten Fix funktioniert es. Hin und wieder finde ich immer noch einen Fehler, aber er scheint gut genug zu sein, um ihn dem Kunden zu zeigen.

Lassen Sie mich wissen, ob dies für Sie funktioniert. Wenn nicht, können wir vielleicht etwas anderes finden. Vielen Dank.

Ich hatte das gleiche Problem mit iOS7. Unten festgelegte Elemente würden meine Ansicht durcheinander bringen und nicht richtig fokussieren.

Alle haben angefangen zu arbeiten, als ich dieses Meta-Tag zu meinem HTML-Code hinzugefügt habe.

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

Der Teil, der den Unterschied machte, war:

height=device-height

Hoffe das hilft jemandem.

Ich habe die Jory CunninghamAntwort genommen und verbessert:

In vielen Fällen ist es nicht nur ein Element, das verrückt wird, sondern mehrere fest positionierte Elemente. In diesem Fall targetElemsollte es sich also um ein jQuery-Objekt handeln, das alle festen Elemente enthält, die Sie "reparieren" möchten. Ho, dies scheint die iOS-Tastatur verschwinden zu lassen, wenn Sie scrollen ...

Natürlich sollten Sie dieses AFTER- Dokumentereignis DOM readyoder kurz vor dem schließenden </body>Tag verwenden.

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

Ich habe eine ähnliche Lösung wie @NealJMD, außer dass meine nur für iOS ausgeführt wird und den Bildlaufversatz korrekt ermittelt, indem das scollTop vor und nach dem nativen Tastatur-Bildlauf gemessen wird und setTimeout verwendet wird, um das native Bildlauf zu ermöglichen:

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

Ich habe die feste Position meines iPad-Hauptlayoutinhalts folgendermaßen festgelegt:

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);

Ich hatte ein ähnliches Problem wie @ ds111 s. Meine Website wurde von der Tastatur nach oben gedrückt, bewegte sich jedoch nicht nach unten, als die Tastatur geschlossen wurde.

Zuerst habe ich @ ds111 Lösung ausprobiert, aber ich hatte zwei inputFelder. Natürlich verschwindet zuerst die Tastatur, dann passiert die Unschärfe (oder so ähnlich). Der zweite inputbefand sich also unter der Tastatur, als der Fokus direkt von einem Eingang zum anderen wechselte.

Außerdem war das "Hochspringen" für mich nicht gut genug, da die gesamte Seite nur die Größe des iPad hat. Also habe ich die Schriftrolle glatt gemacht.

Schließlich musste ich den Ereignis-Listener an alle Eingaben anhängen, auch an diejenigen, die derzeit verborgen waren, daher die live.

Alles in allem kann ich das folgende Javascript-Snippet wie folgt erklären: Hängen Sie den folgenden Listener für Unschärfeereignisse an die aktuelle und alle zukünftigen an inputund textarea(= live): Warten Sie eine Nachfrist (= window.setTimeout(..., 10)) und scrollen Sie reibungslos nach oben (= animate({scrollTop: 0}, ...)), aber nur, wenn "keine Tastatur vorhanden ist" gezeigt "(= 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)
})

Beachten Sie, dass die Kulanzfrist (= 10) möglicherweise zu kurz ist oder die Tastatur weiterhin angezeigt wird, obwohl keine inputoder textareafokussiert ist. Wenn Sie schneller oder langsamer scrollen möchten, können Sie natürlich die Dauer (= 400) anpassen.

Ich habe wirklich hart gearbeitet, um diese Problemumgehung zu finden, die kurz nach Fokus- und Unschärfeereignissen für Eingaben sucht, und durch Scrollen, um die Position des festen Balkens selektiv zu ändern, wenn die Ereignisse eintreten. Dies ist kugelsicher und deckt alle Fälle ab (Navigieren mit <>, Scrollen, Fertig-Schaltfläche). Hinweis id = "nav" ist meine feste Fußzeile div. Sie können dies einfach auf Standard-js oder jquery portieren. Dies ist ein Dojo für diejenigen, die Elektrowerkzeuge benutzen ;-)

define (["dojo / ready", "dojo / query",], function (ready, 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 );
    }

});

}); // Ende definieren

Dies ist ein schwieriges Problem, um "richtig" zu machen. Sie können versuchen, die Fußzeile im Fokus des Eingabeelements auszublenden und bei Unschärfe anzuzeigen, aber das ist unter iOS nicht immer zuverlässig. Von Zeit zu Zeit (etwa jedes zehnte Mal auf meinem iPhone 4S) scheint das Fokusereignis nicht zu feuern (oder es liegt möglicherweise eine Rennbedingung vor), und die Fußzeile wird nicht ausgeblendet.

Nach langem Ausprobieren kam ich auf diese interessante Lösung:

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

Im Wesentlichen: Verwenden Sie JavaScript, um die Fensterhöhe des Geräts zu bestimmen, und erstellen Sie dann dynamisch eine CSS-Medienabfrage, um die Fußzeile auszublenden, wenn die Fensterhöhe um 10 Pixel verkleinert wird. Da das Öffnen der Tastatur die Größe der Browseranzeige ändert, schlägt dies unter iOS nie fehl. Da die CSS-Engine anstelle von JavaScript verwendet wird, ist sie auch viel schneller und flüssiger!

Hinweis: Ich habe festgestellt, dass die Verwendung von "Sichtbarkeit: versteckt" weniger fehlerhaft ist als "Anzeige: keine" oder "Position: statisch", aber Ihr Kilometerstand kann variieren.

Funktioniert bei mir

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'});
    });
}

In unserem Fall würde sich dies von selbst beheben, sobald der Benutzer einen Bildlauf durchführt. Dies ist also der Fix, mit dem wir einen Bildlauf blurauf einem inputoder simuliert haben textarea:

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

Meine Antwort ist, dass es nicht geht.

Ich sehe 25 Antworten, aber in meinem Fall funktioniert keine. Aus diesem Grund verbergen Yahoo und andere Seiten den festen Header, wenn die Tastatur eingeschaltet ist. Und Bing macht die ganze Seite nicht scrollbar (Überlauf-y: versteckt).

Die oben diskutierten Fälle sind unterschiedlich, einige haben Probleme beim Scrollen, andere auf Fokus oder Unschärfe. Einige haben eine feste Fußzeile oder Kopfzeile. Ich kann jetzt nicht jede Kombination testen, aber Sie werden möglicherweise feststellen, dass dies in Ihrem Fall nicht möglich ist.

Fand diese Lösung auf Github.

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

Stellen Sie sicher, dass Sie scrollbaren Inhalt haben.

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

Die Adressleiste wird als zusätzlicher Bonus ausgeklappt.

Für den Fall, dass jemand dies versuchen wollte. Ich habe folgendes für mich an einer festen Fußzeile mit einem Eingabefeld arbeiten lassen.

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

Ich habe das gleiche Problem. Aber ich habe festgestellt, dass die feste Position nur verzögert und nicht gebrochen ist (zumindest für mich). Warten Sie 5-10 Sekunden und prüfen Sie, ob sich das div wieder am unteren Bildschirmrand befindet. Ich glaube, es ist kein Fehler, sondern eine verzögerte Antwort, wenn die Tastatur geöffnet ist.

Ich habe alle Ansätze aus diesem Thread ausprobiert, aber wenn sie nicht geholfen haben, haben sie es noch schlimmer gemacht. Am Ende habe ich beschlossen, das Gerät zu zwingen, den Fokus zu verlieren:

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

und es funktionierte wie ein Zauber und reparierte mein klebriges Login-Formular.

Bitte beachten Sie :

1. Der obige JS-Code dient nur dazu, meine Idee zu präsentieren. Um dieses Snippet auszuführen, ersetzen Sie bitte die Werte in eckigen Klammern (<>) durch die für Ihre Situation geeigneten Werte.
2. Dieser Code wurde entwickelt, um damit zu arbeiten jQuery v1.10.2

Dies ist immer noch ein großer Fehler für alle HTML-Seiten mit höheren Bootstrap-Modalen in iOS 8.3. Keine der vorgeschlagenen Lösungen , die oben gearbeitet und nach in unter der Falte eines hohen modalen auf ein beliebiges Feld Zoomen, Mobile Safari und / oder WkWebView würden die festen Elemente, wo die HTML Körpers Scroll lag, sie bewegen lassen versetzt mit , wo sie eigentlich , wo ausgelegt.

Fügen Sie einen Ereignis-Listener zu Ihren modalen Eingaben hinzu, um den Fehler zu umgehen, z. B.:

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

Ich vermute, dass dies funktioniert, weil durch Erzwingen der Bildlaufhöhe des HTML-Körpers die tatsächliche Ansicht an der Stelle neu ausgerichtet wird, an der iOS 8 WebView den Inhalt des festen modalen Div erwartet.

Wenn jemand nach einer völlig anderen Route gesucht hat (als ob Sie dieses "Fuß" -Div beim Scrollen nicht einmal anheften möchten, sondern nur möchten, dass das Div am Ende der Seite bleibt), können Sie einfach die Fußzeilenposition als festlegen relativ.

Das bedeutet, dass selbst wenn die virtuelle Tastatur in Ihrem mobilen Browser angezeigt wird, Ihre Fußzeile nur am Ende der Seite verankert bleibt und nicht versucht, auf die Anzeige oder das Schließen der virtuellen Tastatur zu reagieren.

Natürlich sieht es auf Safari besser aus, wenn die Position festgelegt ist und die Fußzeile der Seite folgt, während Sie nach oben oder unten scrollen. Aufgrund dieses seltsamen Fehlers in Chrome haben wir jedoch darauf umgestellt, nur die Fußzeile relativ zu machen.

Keine der Bildlauflösungen schien für mich zu funktionieren. Stattdessen haben Sie die Position des Körpers auf fest gesetzt, während der Benutzer Text bearbeitet, und ihn dann statisch wiederhergestellt, wenn der Benutzer fertig ist. Dies verhindert, dass Safari Ihre Inhalte auf Sie scrollt. Sie können dies entweder auf Fokus / Unschärfe der Elemente tun (siehe unten für ein einzelnes Element, aber für alle Eingaben, Textbereiche), oder wenn ein Benutzer etwas unternimmt, um mit der Bearbeitung zu beginnen, wie das Öffnen eines Modals es auf diese Aktion (zB modales Öffnen / Schließen).

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

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

iOS9 - das gleiche Problem.

TLDR - Quelle des Problems. Scrollen Sie zur Lösung nach unten

Ich hatte ein Formular in einem position:fixedIframe mit id = 'subscribe-popup-frame'

Gemäß der ursprünglichen Frage wird der Iframe beim Eingabefokus an den oberen Rand des Dokuments und nicht an den oberen Bildschirmrand verschoben.

Das gleiche Problem trat im Safari-Entwicklungsmodus nicht auf, wenn der Benutzeragent auf ein Gerät eingestellt war. Es scheint also, dass das Problem durch die virtuelle iOS-Tastatur verursacht wird, wenn sie angezeigt wird.

Ich bekam einen Einblick in das Geschehen, indem $('#subscribe-popup-frame', window.parent.document).position()ich die Position des Iframes (z. B. ) auf der Konsole protokollierte, und von dort aus konnte ich sehen, dass iOS die Position des Elements auf den {top: -x, left: 0}Zeitpunkt einstellte, an dem die virtuelle Tastatur auftauchte (dh sich auf das Eingabeelement konzentrierte).

Meine Lösung bestand also darin, dieses lästige Problem zu lösen -x, das Vorzeichen umzukehren und es dann mit jQuery hinzuzufügentop Position wieder zum Iframe . Wenn es eine bessere Lösung gibt, würde ich sie gerne hören, aber nachdem ich ein Dutzend verschiedene Ansätze ausprobiert habe, war es die einzige, die für mich funktioniert hat.

Nachteil: Ich musste eine Zeitüberschreitung von 500 ms einstellen (vielleicht würde weniger funktionieren, aber ich wollte sicher sein), um sicherzustellen, dass ich den endgültigen xWert erfasst habe , nachdem iOS seinen Fehler mit der Position des Elements gemacht hatte. Infolgedessen ist die Erfahrung sehr ruckelig. . . aber zumindest funktioniert es

Lösung

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

Dann rufen Sie einfach so mobileInputRepositionetwas wie $('your-input-field).focus(function(){})und an$('your-input-field).blur(function(){})