Ausführliche Erläuterung, wie das Problem gelöst werden kann, dass die Schnittstelle nicht in die ursprüngliche Position zurückkehrt, wenn die IOS-Tastatur durch das Focusout-Ereignis zurückgezogen wird

Heute bin ich bei der Entwicklung einer mobilen H5-Seite auf das Problem gestoßen, dass die Schnittstelle nicht in ihre ursprüngliche Position zurückkehren kann, wenn die Tastatur unter IOS eingefahren wird. Nachfolgend werden die Probleme und Symptome im Detail beschrieben:

Bei der betreffenden Seite handelt es sich um eine Formularstruktur. Das heißt, es ähnelt einer Struktur mit vier Eingabeformularen unter einem Div, in die Benutzer E-Mail-Informationen eingeben können. ähnlich:

 <div> <input type=text placeholder=Bitte geben Sie die Provinz, Stadt und den Landkreis ein/> <input type=text placeholder=Bitte geben Sie die Adresse ein/> <input type=text placeholder=Bitte geben Sie den Namen ein/> < Eingabetyp=Textplatzhalter=Bitte geben Sie die Adresse/Kontaktnummer/></div> ein

Der Screenshot sieht wie folgt aus:

Wenn der Benutzer die Kontaktnummer auf dem Mobiltelefon eingibt, wird die iPhone-Tastatur angezeigt. Damit der Benutzer das Telefoneingabefeld sehen kann, wird die gesamte Seite auf dem iPhone nach oben verschoben (andernfalls die Tastatur). deckt das Telefoneingabefeld ab). Zu diesem Zeitpunkt befindet sich der obere Rand der Seite tatsächlich nur einen Teil der Entfernung von unserem Ansichtsfenster entfernt (wir sehen, wie eine Reihe von Eingabefeldern aus der Benutzeroberfläche verschwindet).

Wenn der Benutzer jedoch die Eingabe abschließt und die Tastatur schließt, wird die Seitenposition nicht wiederhergestellt, obwohl die Tastatur weggelegt wird.

Tatsächlich ist dies darauf zurückzuführen, dass iOS nicht verhindern kann, dass der Teil der Seite, der aus dem Ansichtsfenster herausscrollt, herunterfällt, wenn die Tastatur eingefahren wird. Zu diesem Zeitpunkt kann der Benutzer die Seite mit dem Finger zurückziehen.

Aber die Erfahrung war doch nicht gut.

Um dieses Problem zu lösen, können wir window.scrollTo(0, 0) aufrufen, wenn der Benutzercursor das Eingabefeld verlässt, um die Seite so zu scrollen, dass sie am oberen Rand des Ansichtsfensters ausgerichtet ist, wodurch der Seiten-Home-Effekt erzielt wird.

Das Problem besteht nun darin, Unschärfeereignisse zu allen vier Eingabefeldern im Formular hinzuzufügen und dann window.scrollTo im Handler aufzurufen. Unabhängig davon, ob es über Vues @blur oder über DOM-Operationen hinzugefügt wird, müssen jedoch 4 Ereignis-Listener hinzugefügt werden, was nicht sehr elegant ist. Natürlich haben wir über die Verwendung von Event-Proxys nachgedacht.

Das heißt, wir platzieren den Ereignis-Listener auf dem obersten Element und definieren dann eine inputBlur-Funktion, die auf die Auslösung wartet.

 <div @blur=inputBlur> <input type=text placeholder=Bitte geben Sie die Provinz, Stadt und den Kreis ein/> <input type=text placeholder=Bitte geben Sie die Adresse ein/> <input type=text placeholder=Bitte füllen Sie aus name/> <input type=text placeholder=Bitte geben Sie Ihre Kontaktnummer ein/></div>

Infolgedessen stellten wir fest, dass unser Ereignis-Listener nicht ausgelöst werden konnte. Der Grund dafür ist, dass das blur des Eingabefelds nicht sprudeln kann.

Nach der Abfrage wurde festgestellt, dass die beiden DOM-Ereignisse focus und blur in der Spezifikation nicht sprudeln können. Ähnlich gibt es zwei weitere Ereignisse focusin und focusout die Blasen verursachen können.

In einigen Artikeln im Internet wurde erwähnt, dass focusin und focusout DOM-Ereignisse sind, die nur von IE-Browsern unterstützt werden. Wenn wir uns das MDN-Dokument ansehen, stellen wir tatsächlich fest, dass diese beiden Ereignisse zum Standard in der DOM-3-Spezifikation geworden sind und von einer großen Anzahl von Browsern unterstützt werden.

Um das Problem durch diese beiden Ereignisse entscheidend zu lösen, haben wir es daher focusout geändert

 <div @focusout=inputBlur> <input type=text placeholder=Bitte geben Sie die Provinz, Stadt und den Landkreis ein/> <input type=text placeholder=Bitte geben Sie die Adresse ein/> <input type=text placeholder=Bitte füllen Sie aus name/> <input type=text placeholder=Bitte geben Sie Ihre Kontaktnummer ein/></div>

Dann implementieren Sie unseren Event-Handler:

 inputBlur(e) { // Bestimmen Sie zunächst, ob das Zielelement, das das Ereignis auslöst, ein Eingabefeld ist. Wir konzentrieren uns nur auf das Verhalten des Eingabefelds. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { window.scrollTo(0,0 } },

Zu diesem Zeitpunkt ist unser Problem gelöst. Wenn wir Inhalte über das Eingabefeld eingeben und dann auf der Tastatur auf „Fertig stellen“ klicken, um die Tastatur zu schließen, entspricht der Effekt unseren Erwartungen.

Nach Tests auf Mobiltelefonen haben wir jedoch festgestellt, dass die Seite wackelt, wenn wir direkt vom 电话输入框zum 姓名输入框wechseln. Lassen Sie uns die Analyse fortsetzen.

Tatsächlich ist der Grund, warum die beiden Eingabefelder beim Umschalten zittern, auch sehr einfach. Denn wenn wir zwischen den beiden oben genannten Eingabefeldern wechseln, löst die Seite zuerst blur 电话输入框und dann focus 姓名输入框aus. Wenn in diesem Fall eine Unschärfe auftritt, wird unser window.scrollTo(0,0) ausgelöst, wodurch die Seite nach unten gescrollt wird und dann 姓名输入框fokussiert wird, sodass die Tastatur weiterhin angezeigt wird --- dies bewirkt, dass die Seite wieder nach oben verschoben wird.

Tatsächlich müssen wir beim Wechseln zwischen zwei Eingabefeldern das window.scrollTo -Verhalten nicht auslösen, wenn das erste Eingabefeld unscharf ist. Ändern wir also unseren Code so, dass beim Umschalten des Eingabefelds das Verhalten des ersten Eingabefelds unterbrochen werden kann. Hier verwenden wir setTimeout, um Folgendes zu lösen:

 <div @focusout=inputBlur @focusin=inputFocus> <input type=text placeholder=Bitte geben Sie Provinz, Stadt und Landkreis ein/> <input type=text placeholder=Bitte geben Sie die Adresse ein/> <input type=text placeholder= Bitte geben Sie den Namen ein/> < input type=text placeholder=Bitte geben Sie Ihre Kontaktnummer ein/></div> 

 inputBlur(e) { // Bestimmen Sie zunächst, ob das Zielelement, das das Ereignis auslöst, ein Eingabefeld ist. Wir konzentrieren uns nur auf das Verhalten des Eingabefelds. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { // Das Eingabefeld verliert den Fokus und die IOS-Tastatur muss aus dem herausgeschoben werden Scrollen Sie durch einen Teil der Seite, um ihn wiederherzustellen. Scrollen Sie die Seite zum oberen Rand des Fensters und richten Sie sie aus console.log('set timer') this.timer = setTimeout(() => { console.log('timer trigger') window.scrollTo(0,0); }, 0) } }, inputFocus(e) { // Wenn Fokus, entferne den Timer des vorherigen Eingabefelds if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { clearTimeout(this.timer } }

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.