wake-up-neo.com

So beheben Sie das iOS 11-Eingabeelement in einem Fehler mit festen Modalen

Ein Fehler bei den HTML-Eingaben in der neuen Version von iOS 11 führt zu Problemen für Websites, die Eingabeelemente in festen Containern enthalten. Hier ist genau das, was passiert und einige mögliche Problemumgehungen.

Wenn Sie einen festen Container haben und dieser sich nahe genug am unteren Rand des Bildschirms befindet, sodass der Browser einen Bildlauf durchführen muss, um Platz für die Tastatur zu schaffen, wird der Cursor außerhalb der Texteingabe platziert da eine unserer Kernfunktionalitäten auf der Benutzereingabe über einen festen modalen Dialog beruht.

Dies war ein kritisches Problem für uns, da eine unserer Kernfunktionalitäten auf der Benutzereingabe über einen festen modalen Dialog beruht.

 enter image description here

jquerycssinputmodal-dialogios11
15
Amjad Jafar

Im Moment gibt es no die perfekte Lösung dafür. Zwei temporäre Optionen:

  1. Ändern Sie den Dialog/das Modal in position: absolute (nicht empfohlen)
  2. Entfernen Sie den Bildlauf im Hintergrund, wenn das modale/Dialogfeld geöffnet wird, und stellen Sie es wieder her, wenn das Dialogfeld geschlossen wird. 

Detail für Option 2: Sie können zum Beispiel Ihr Root-Div (oder was auch immer eine Bildlaufleiste hat) beim Öffnen als overflowY='hidden' festlegen und es beim Schließen wieder overflowY='' ändern. (Nachteil: Der Browser wird beim Öffnen des Dialogs/Modals nach oben gescrollt.)

Hinweis: 

  1. Denken Sie daran, das Betriebssystem/den Browser zu erkennen, wenn ein Fehler behoben wird. Andernfalls treten möglicherweise Probleme im IE auf.
  2. Folgen Sie diesem Thread , um das neueste Update zu diesem Problem zu erhalten.
6
Ming

Diese Lösung hat mir geholfen, ein beliebiges IOS -Modell zu beheben.

Erstes Ziel nur IOS Geräte mit diesem Code.

//target ios
var isMobile = {
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }
}
if(isMobile.iOS()) { 
      jQuery('body').addClass('Apple-ios');
}

dann fügen Sie diesen Code in Ihre CSS ein:

body.Apple-ios.modal-open {
  position: fixed;
  width:100%;
}

Wenn Sie das WordPress- und Cache-Plugin verwenden, müssen Sie den gesamten Cache leeren. 

Hoffe das hilft dir.

4
Sajjad Ahmad

Ich bin nicht sicher, ob dies genau das gleiche Problem ist, mit dem Sie konfrontiert sind, aber diese Lösung hat für mich funktioniert:

.modal-open {position: fixed;}

Modifizierter Textbereich für iOS 11 Safari-Bootstraps außerhalb des Cursors

2
John Nimis

Dieser Fehler wirkt sich auch auf die Eingaben von iframe aus, daher glaube ich, dass die von mir gefundenen Korrekturen auch bei Modalen hilfreich sind.

Alles, was Sie tun müssen, ist, die folgende css auf die Eingabe im iframe anzuwenden.

input:hover {
   cursor: text
}

Hier ein Beispiel: https://codepen.io/ryanoutloud/project/full/AEKGjj

0
Ryan L.

Diese Lösung hat mir dabei geholfen, das IOS11-Eingabeproblem zu beheben: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Es behebt auch störende Hintergrundscrolls, wenn Sie versuchen, innerhalb von Modal zu scrollen :)

Zusammenfassung: Sie fügen eine Position hinzu: Fest mit dem Hauptteil, dem Cash-Fenster. PageYOffset und blättern Sie nach dem Schließen des Popup-Fensters zu der Bargeldposition, um ein Verschieben zum Seitenanfang zu verhindern.

0
Мария Хаак

Ich hatte das gleiche Problem, schauen Sie sich meine Antwort an, vielleicht hilft es Ihnen: https://stackoverflow.com/a/46954486/8775824

0
Dan

Ich hatte diesen iOS-Fehler mit einem Anmeldeformular in einem fixed-Header/Banner-Element. Es gibt eine button in der Kopfzeile, um das modale Fenster mit dem Anmeldeformular zu öffnen ..__ Das tatsächliche modale Fenster ist absolute positioniert, aber das header/banner-Element ist fixed.

Ich habe es mit wenigen Zeilen Code ganz leicht gelöst. Was ich also tue, ist, dass ich den fixed-Container in absolute ändere, aber nur wenn das Anmeldeformular geöffnet ist, macht es die Magie mit der Eingabemarke.

jQuery:

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS:

.ios body.login-open #banner-wrapper {
  position: absolute;
}

Nun ist der feste Header absolut. Wenn es sich um iOS handelt, und nur dann, wenn die Login-Box geöffnet ist.

Dies kann Ihr Problem lösen, wenn Sie ähnliche Probleme haben.

Ps. Sie benötigen ein Skript, um den Klassennamen ios/ios11 in <html> oder ähnliches zu erkennen und zu schreiben, aber ich werde in diesem Beitrag nicht darauf eingehen. Es gibt viele Lösungen dafür.

0
JoakimB

Versuchen Sie dies, es kann Ihnen helfen

//HTML
<head>
     <style>
          .ios-11-body-fixed {
             position: fixed;
             width: 100%;
          } 
     </style>
</head>

//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
    $('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
           $('body').removeClass('ios-11-body-fixed');
});
0
Dharmesh Rakholia