iOS 5 feste Positionierung und virtuelle Tastatur

138

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.

jeffc
quelle
Ja, es scheint, dass Apple dies für IOS5 nicht so gut durchdacht hat. Alle Elemente mit fester Position werden relativ zur Seite, sobald die virtuelle Tastatur angezeigt wird. Es wäre wahrscheinlich in Ordnung, wenn die Elemente in eine absolute Position zurückkehren würden, da dies das Layout nicht beschädigen würde. Leider ist die tatsächliche Platzierung dieser Elemente weit weniger vorhersehbar. Ich habe genau dieses Problem mit meinem festen Header auf [ANONYMISIERT]. Scrollen Sie die Seite nach unten, klicken Sie dann auf das Suchfeld und schlagen Sie ... das Layout ist kaputt. Ich habe sogar versucht, das Problem zu beheben, indem ich zur absoluten Positionierung des Fokusereignisses zurückgekehrt bin, was funktioniert, aber dann
verliere
2
Ich bin auf dasselbe Problem gestoßen. Hat jemand einen Fehler bei Apple eingereicht, um zu sehen, wie dies behoben werden kann? Hat jemand anderes gesehen, dass dieses Verhalten in iOS6 anhält?
Robert Hui
1
Ich habe das gleiche Problem mit iOS6.
Redtopia
24
Das gleiche Problem scheint immer noch in iOS7 zu bestehen!
Ria Weyprecht
5
Scheint in iOS 8 nicht behoben zu sein ...
contactmatt

Antworten:

49

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.

Nick Retallack
quelle
Ich bin heute buchstäblich auf dieses Problem gestoßen, und dies schien das vernünftigste zu sein, +1.
Daniel
3
Das funktioniert ziemlich gut. Ich nenne dies nur für iOS-Geräte: var isIOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
Redtopia
8
Ich habe auch $ (window) .scrollTop (0) entfernt ... Ich glaube nicht, dass es benötigt wird und es unerwünschtes Scrollen verursacht hat.
Redtopia
1
Oder einfach, document.body.scrollTop = 0wenn Sie jQuery nicht verwenden und auf die neuesten Browser abzielen.
Langdon
Bei längeren Formularen kann das Einstellen von $(window).scrollTop(0);dazu führen, dass die fokussierte Eingabe vom Bildschirm verschoben wird, z. B. eine Eingabe weiter unten auf der Seite oder wenn sich ein iPhone im Hochformat befindet. Eine bessere Lösung ist die header.css({position:'absolute',top:window.pageYOffset+'px'});Fokussetzung und die Unschärfe header.css({position:'fixed',top:0});.
Robocat
16

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);
ds111
quelle
3
Hilft mir nicht :(
Dmitry
@Altaveron. Tut mir leid das zu hören. Es war für ein bestimmtes Problem, das ich auf ios6 und niedrigeren Geräten hatte. Ich habe seitdem nicht mehr besucht.
ds111
14

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);
    }
});
Luke
quelle
Es ist vom jquery.timers Plugin. Sie können stattdessen window.setTimeout verwenden.
Hatch
Das Auslösen derselben Funktion bei Eingabeunschärfe und Fokus hilft ebenfalls.
Blowsie
Genie - grabe das wirklich. Auch +1 zu @ Blowsies Vorschlag, dies von Fokus und Unschärfe anstelle von Bildlauf zu verwenden.
Skone
12

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;
    });
Riley Dutton
quelle
Auf dem iPad hat das bei mir nicht funktioniert. Am Ende habe ich die Position der festen Fußzeile in relativ geändert und die Fußzeile am unteren Rand der Seite angezeigt, bis das Ereignis der Eingabeunschärfe erkannt wurde, als ich die Position wieder auf fest geändert habe.
Akrikos
6
Funktioniert nicht mehr, iOS hat wahrscheinlich den Fehler behoben, der diese Funktion verursacht hat
Kevin
6

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

Jory Cunningham
quelle
Dies funktioniert bis iOS 7 hervorragend. Hat noch jemand Probleme damit, dass das Element richtig positioniert ist, aber verschwindet?
Rona Kilmer
@RonaKilmer Verwandle die initin eine reguläre Funktion (nicht selbstaufrufend; sie wird zu früh ausgelöst ). Rufen Sie dann iOSKeyboardFix.init();kurz vor dem Ende der ifAnweisung auf.
Kostenlos
@cfree Danke, ich habe das vor einiger Zeit implementiert, aber das ist nicht mein Problem. Da ist noch etwas los. Eines meiner festen Elemente verschwindet, wenn es neu positioniert wird. Der andere nicht. Ich kann das nicht auf die Tastaturkorrektur zurückführen, da es nicht überall passiert. Ich habe auch nicht gesehen, dass jemand anderes das gleiche Problem hat, also muss ich tiefer graben.
Rona Kilmer
4

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.

NealJMD
quelle
4

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.

entkommene Katze
quelle
2
Sie scheinen diese Zeitüberschreitung nicht zu benötigen (zumindest hat sie ohne mich gut funktioniert), und wenn dies auch bei ausgewählten Elementen der Fall ist, funktioniert diese Lösung ansonsten hervorragend.
Phillip Gooch
3

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.

Pasevin
quelle
Danke @pasevin. Dies hat mein Problem in iOS 9.3.2 behoben
stillatmylinux
3

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');
    }
})();
vsync
quelle
2
@vsync Entschuldigung, ich hatte keine Ahnung, dass Sie ein "Meisterkoch" waren
Mike
Bei Auswahl bewegt sich der Eingabefokus in diesem Zeit-Header nach oben (nicht sichtbar). Ich möchte den Header-Div beim Fokussieren von Auswahl- und Eingabedateien korrigieren. jemand bitte helfen Sie mir
VK Chikkadamalla
2

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);
}
ChrisWren
quelle
1

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);
Brett
quelle
Dies funktionierte sehr gut für mich in einer komplizierten Verwechslung von JQUery UI-Dialogfeldern und Bildschirmtastaturen, bei der mein Layout auf halber Höhe des Bildschirms blieb, wenn Dialogfeld und Tastatur gleichzeitig geschlossen wurden, allerdings mit einigen Änderungen: var main = $ (' body div '). first (); ... und ... Funktion mainHeightChanged () {$ (oben) .scrollTop (0); }
Awerealis
1
setInterval... Ja wirklich? Es ist besser, einfach bei dem Fehler zu bleiben, als dies zu tun
vsync
1

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.

Raul Pinto
quelle
1

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

httpete
quelle
Dies könnte fantastisch sein ... Portierung auf jQuery / js & wird zurückmelden. Abgesehen davon werden Lösungen für die Auswahl von Nischenskriptsprachen, die das Portieren oder Hinzufügen nicht standardmäßiger Tools zu einem Projekt erfordern, vorhersehbar nicht als allgemein hilfreich angesehen.
Ericpeters0n
Dies funktioniert nicht in jedem Fall, da Sie dadurch zur 'statischen' Position des Elements scrollen, die möglicherweise meilenweit von der ursprünglichen Position Ihrer Eingabe entfernt ist, insbesondere wenn es sich in einem festen Container befindet. Wenn der Container eine overflow:hiddenRegel hat, wird Ihre Eingabe überhaupt nicht angezeigt, da sie sich jetzt außerhalb des Rahmens befindet.
James M. Lay
1

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.

Richard Kennard
quelle
1
Möglicherweise müssen Sie zwischen Höhe und Breite wechseln, um dies sowohl im Hoch- als auch im Querformat zu beheben.
Neil Monroe
1

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

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);
});
Basarat
quelle
1

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.

Szalai Laci
quelle
Dies beantwortet die Frage nicht.
Neophyt
4
Dies ist der Fall, da die Antwort lautet, dass es keine Lösung gibt.
Szalai Laci
0

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.

Leigh Mackay
quelle
0

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>
Bernard
quelle
0

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.

Philip
quelle
0

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
Anton Boritskiy
quelle
0

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.

Tiefenerster Designer
quelle
0

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.

Terry Bu
quelle
0

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");
});
Scott Semyan
quelle
0

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(){})

Martellalex
quelle