webentwicklung-frage-antwort-db.com.de

iOS 5 feste Positionierung und virtuelle Tastatur

Ich habe eine mobile Website, die über eine Position am unteren Rand des Bildschirms befestigt ist: behoben. Alles funktioniert gut in iOS 5 (ich teste auf einem iPod Touch), bis ich auf einer Seite mit einem Formular bin. Wenn ich in 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" geklickt habe, um die Tastatur zu schließen, kehrt das div zu seiner Position am unteren Rand des Bildschirms zurück und folgt der Position: feste Regel.

Hat jemand anderes ein solches Verhalten erlebt? Wird das erwartet? Vielen Dank.

135
jeffc

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 einfach nach oben und positioniere es dort, sodass der iOS-Benutzer nichts Ungewöhnliches bemerkt. Binden Sie dies in die Erkennung einiger Benutzeragenten ein, damit andere Benutzer dieses Verhalten nicht erhalten.

48
Nick Retallack

Ich hatte ein etwas anderes iPad-Problem, bei dem die virtuelle Tastatur mein Ansichtsfenster in den Offscreen schob. Nachdem der Benutzer die virtuelle Tastatur geschlossen hatte, war 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);
15
ds111

Dies ist der Code, den wir verwenden, um ein Problem mit dem ipad zu beheben. Grundsätzlich werden Diskrepanzen zwischen Versatz und Bildlaufposition erkannt, was bedeutet, dass "fixiert" 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);
    }
});
14
Hatch

Die positionfix-Elemente aktualisieren ihre Position einfach nicht, wenn die Tastatur eingeschaltet ist. Ich fand das, indem ich Safari dazu brachte, zu glauben, dass die Größe der Seite geändert wurde, die Elemente sich jedoch neu positionieren. Es ist nicht perfekt, aber Sie müssen sich zumindest keine Sorgen darüber machen, zu "Position: Absolut" zu wechseln und Änderungen selbst zu verfolgen.

Der folgende Code wartet nur darauf, wann der Benutzer wahrscheinlich die Tastatur verwendet (aufgrund der Fokussierung einer Eingabe), und bis er eine Unschärfe hört, wartet er nur auf Scroll-Ereignisse und führt dann den Größenänderungs-Trick 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;
    });
12
Riley Dutton

Nur für den Fall, dass jemand auf diesen Thread stößt, wie ich es beim Erforschen dieses Problems getan habe. Ich fand diesen Thread hilfreich, um meine Gedanken zu diesem Thema anzuregen.

Dies war meine Lösung für ein aktuelles Projekt. Sie müssen lediglich 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 beim Fixieren, da iOS die DOM-Manipulation während des Bildlaufs stoppt, der Trick aber ...

6
Jory Cunningham

Dieses Thema ist wirklich nervig.

Ich kombinierte einige der oben genannten Techniken und kam dazu:

$(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 Navbars (Kopf- und Fußzeile, die Twitter-Bootstrap verwenden).

Mit diesem zeitgesteuerten/verzögerten Fix funktioniert es. Ich finde immer noch eine Störung, aber es scheint gut genug zu sein, um es dem Kunden zu zeigen.

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

4
escapedcat

Keine der anderen Antworten, die ich für diesen Fehler gefunden habe, hat für mich funktioniert. Ich konnte das Problem einfach beheben, indem ich die Seite um 34px nach oben scrollen konnte. 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 bricht.

4
NealJMD

Ich habe Jory Cunningham beantwortet und verbessert:

In vielen Fällen ist nicht nur ein Element verrückt, sondern mehrere fix positionierte Elemente. In diesem Fall sollte targetElem ein jQuery-Objekt sein, das alle fixierten Elemente enthält, die Sie "reparieren" möchten. Ho, das scheint die iOS-Tastatur verschwinden zu lassen, wenn Sie scrollen ...

Es ist unnötig zu erwähnen, dass Sie diesesNACH DEMdocument DOM ready -Ereignis oder kurz vor dem schließenden </body>-Tag verwenden sollten.

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

Ich hatte das gleiche Problem mit iOS7. Unten fixierte Elemente würden meine Sicht nicht richtig fokussieren.

Alles fing an zu arbeiten, als ich dieses Meta-Tag zu meiner HTML-Datei hinzufügte.

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

Der entscheidende Unterschied war:

height=device-height

Hoffe das hilft jemandem.

3
pasevin

Ich habe eine Lösung, die @NealJMD ähnlich ist, mit der Ausnahme, dass meine nur für iOS ausgeführt wird. Der Scroll-Versatz wird durch Messen des ScollTop vor und nach dem nativen Tastatur-Scrollen sowie durch Verwendung von setTimeout korrekt bestimmt, um das native Scrollen 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);
}
2
ChrisWren

Ja, es scheint, als hätte Apple das für IOS5 nicht so gut überstanden. Elemente mit fester Position werden relativ zur Seite, sobald die virtuelle Tastatur angezeigt wird. Es wäre wahrscheinlich in Ordnung, wenn die Elemente zu einer absoluten Position zurückkehren würden, da dies das Layout nicht beschädigen würde. Leider ist die tatsächliche Platzierung dieser Elemente weitaus weniger vorhersehbar. 

Ich habe genau dieses Problem mit meinem festen Header in [ANONYMISIERT]. Scrollen Sie die Seite nach unten und klicken Sie dann auf das Suchfeld. Ich habe sogar versucht, das Problem zu korrigieren, indem ich die absolute Positionierung des Fokusereignisses wiederherstellte. Dies funktioniert zwar, aber dann verliere ich den Fokus (die Tastatur bleibt geöffnet, aber der Cursor befindet sich nicht mehr im Suchfeld). 

Jedenfalls arbeite ich daran, also werde ich dich wissen lassen, ob ich es sortiere

Prost

2
John williams

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

Meine Antwort ist, dass es nicht geht.

Ich sehe 25 Antworten, aber in meinem Fall funktioniert keine. Aus diesem Grund blenden Yahoo und andere Seiten die feste Kopfzeile aus, wenn die Tastatur eingeschaltet ist. Und Bing macht die gesamte Seite nicht scrollbar (overflow-y: hidden).

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

1
Szalai Laci

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

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

Außerdem war das "Hochspringen" nicht gut genug für mich, da die ganze 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 ausgeblendet waren, daher die live.

Alles in allem kann ich das folgende JavaScript-Snippet wie folgt erklären: Fügen Sie den folgenden Unschärfe-Ereignis-Listener dem aktuellen und allen zukünftigen input und textarea (= live) hinzu: Warten Sie eine Nachfrist (= window.setTimeout(..., 10)) und scrollen Sie reibungslos nach oben (= animate({scrollTop: 0}, ...)), aber nur, wenn "keine Tastatur angezeigt wird" (= 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 Nachfrist (= 10) möglicherweise zu kurz ist oder die Tastatur weiterhin angezeigt wird, obwohl kein input oder textarea aktiviert ist. Natürlich können Sie die Dauer anpassen, wenn Sie schneller oder langsamer scrollen möchten (= 400).

1
Raul Pinto

Dies ist ein schwieriges Problem, um "richtig" zu sein. Sie können versuchen, die Fußzeile im Eingabeelementfokus auszublenden und auf Unschärfe zu zeigen, aber das ist unter iOS nicht immer zuverlässig. Das Fokusereignis scheint ab und zu (etwa alle zehn mal auf meinem iPhone 4S) nicht zu schießen (oder es gibt möglicherweise eine Racebedingung), und die Fußzeile wird nicht ausgeblendet.

Nach langem Ausprobieren stellte ich mir 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 Höhe des Fensters um 10 Pixel schrumpft. Da beim Öffnen der Tastatur die Größe des Browsers geändert wird, schlägt dies unter iOS nie fehl. Da es die CSS-Engine anstelle von JavaScript verwendet, ist es auch viel schneller und reibungsloser!

Hinweis: Ich habe bei der Verwendung von 'Sichtbarkeit: Verborgen' weniger Störgeräusche als 'Anzeige: Keine' oder 'Position: Statisch' gefunden. Ihre Laufleistung kann jedoch variieren.

1
Richard Kennard

Ich habe die feste Position meines Ipad-Hauptlayoutinhalts folgendermaßen korrigiert:

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

In unserem Fall würde dies sich selbst beheben, sobald der Benutzer einen Bildlauf durchführt. Dies ist also der Fix, den wir zum Simulieren eines Scrollens in blur in einer beliebigen input oder textarea verwendet haben: 

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

ich habe wirklich hart gearbeitet, um diese Problemumgehung zu finden, die kurz gesagt nach Fokus- und Unschärfereignissen bei Eingaben sucht. Dies ist kugelsicher und deckt alle Fälle ab (Navigation mit <>, Scrollen, Fertig-Schaltfläche). Hinweis id = "nav" ist meine feste Fußzeile div. Sie können dies problemlos auf Standard-Js oder Jquery portieren. Dies ist ein Dojo für alle, die Elektrowerkzeuge verwenden ;-)

define ([ "dojo/ready") "dojo/query", ], Funktion (ready, Abfrage) {

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

1
httpete

iOS9 - dasselbe Problem.

TLDR - Ursache des Problems. Um eine Lösung zu finden, scrollen Sie nach unten

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

Wie bei der ursprünglichen Frage würde der Iframe bei der Eingabe den oberen Rand des Dokuments und nicht den oberen Rand des Bildschirms überschreiten.

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

Ich habe ein wenig Einblick in das bekommen, was durch die Protokollierung der Position des Iframes (z. B. $('#subscribe-popup-frame', window.parent.document).position()) in der Konsole beschrieben wurde. Von dort aus konnte ich feststellen, dass iOS die Position des Elements auf {top: -x, left: 0} zu setzen schien, als die virtuelle Tastatur auftauchte (dh auf das Eingabeelement fokussiert). .

Meine Lösung bestand also darin, diesen ärgerlichen -x zu übernehmen, das Vorzeichen umzukehren und dann mit jQuery diese top-Position wieder in den iframe einzufügen. Wenn es eine bessere Lösung gibt, würde ich das gerne hören, aber nachdem ich ein Dutzend verschiedener Ansätze ausprobiert hatte, war es die einzige, die für mich funktionierte.

Nachteil: Ich musste ein Timeout von 500ms einstellen (vielleicht würde weniger funktionieren, aber ich wollte sicher sein), um sicherzugehen, dass ich den endgültigen x-Wert erfasst habe, nachdem iOS mit der Position des Elements seinen Fehler gemacht hatte. Als Ergebnis ist die Erfahrung sehr ruckartig. . . 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 mobileInputReposition in etwas wie $('your-input-field).focus(function(){}) und $('your-input-field).blur(function(){}) auf.

0
martellalex

Dies ist immer noch ein großer Fehler für alle HTML-Seiten mit höheren Bootstrap -Modalen in iOS 8.3. Keine der oben vorgeschlagenen Lösungen hat funktioniert, und nachdem Mobile Safari und/oder WkWebView in ein Feld unterhalb der Falte eines großen Modals hineingezoomt haben, haben sie die festen Elemente an die Position verschoben, an der sich der Bildlauf des HTML-Körpers befand, sodass sie nicht an der Position ausgerichtet waren, an der sie tatsächlich angelegt.

Fügen Sie zur Umgehung des Fehlers einen Ereignis-Listener zu Ihren modalen Eingaben hinzu, z.

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

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

0

Wenn jemand nach einer völlig anderen Route gesucht hat (wenn Sie nicht gerade versuchen, diese "Fußzeile" div beim Scrollen zu fixieren, sondern nur das div am Ende der Seite bleiben soll), können Sie die Fußzeilenposition einfach als festlegen relativ. 

Das bedeutet, dass selbst wenn die virtuelle Tastatur in Ihrem mobilen Browser angezeigt wird, die Fußzeile am unteren Rand der Seite verankert bleibt und nicht auf das Anzeigen oder Schließen der virtuellen Tastatur reagiert. 

Offensichtlich sieht es auf Safari besser aus, wenn die Position fixiert ist und die Fußzeile der Seite folgt, wenn Sie nach oben oder unten scrollen. Aufgrund dieses seltsamen Fehlers in Chrome haben wir letztendlich auf die relative Fußzeile umgestellt. 

0
Terry Bu

Falls jemand das ausprobieren wollte. Ich habe die folgenden Arbeiten für mich auf einer festen Fußzeile mit einem Eingabefeld ausgeführt.

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

Fand diese Lösung auf Github.

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

Stellen Sie sicher, dass Sie einen 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 faltet sich als zusätzlicher Bonus zusammen.

0
Leigh Mackay

Keine der Scroll-Lösungen schien für mich zu funktionieren. Stattdessen wurde festgelegt, dass die Position des Hauptteils festgelegt wird, während der Benutzer Text bearbeitet, und dann wieder auf statisch gesetzt wird, wenn der Benutzer fertig ist. Dadurch wird verhindert, dass Safari Ihren Inhalt durchblättert. Sie können dies entweder auf den Fokus/die Unschärfe der Elemente tun (unten für ein einzelnes Element dargestellt, kann aber für alle Eingaben Textbereiche sein), oder wenn ein Benutzer etwas zum Bearbeiten anfängt, z. B. das Öffnen eines Modals, können Sie dies tun es auf diese Aktion (z. B. modales Öffnen/Schließen).

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

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

Ich habe das gleiche Problem. Aber mir wurde klar, 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 am unteren Bildschirmrand befindet. Ich glaube, es ist kein Fehler, sondern eine verzögerte Reaktion, wenn die Tastatur geöffnet ist.

0
Philip

Ich habe alle Ansätze aus diesem Thread ausprobiert, aber wenn sie nicht geholfen haben, sind sie noch schlimmer geworden. Am Ende entschied ich mich, 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 fixierte mein klebriges Login-Formular.

Bitte HINWEIS: 

  1. Der obige JS-Code dient nur zur Veranschaulichung meiner Idee. Um dieses Snippet auszuführen, ersetzen Sie die Werte in spitzen Klammern (<>) durch die für Ihre Situation geeigneten Werte. 
  2. Dieser Code ist für die Verwendung mit jQuery v1.10.2 konzipiert.
0
Anton Boritskiy