Vielleicht sind dies die H5-Softkeyboard-Kompatibilitätslösungen, die Sie suchen (Zusammenfassung)

Ich habe kürzlich an einem H5-Chat-Projekt gearbeitet und bin auf eine der größten Fallstricke gestoßen: Das Eingabefeld wird fokussiert, die Softtastatur wird angezeigt und das Eingabefeld muss an die Eingabemethode angepasst (oder verschoben) werden Kasten. Die Anforderungen sind sehr klar und scheinen einfach, sind es aber eigentlich nicht. Nachdem wir mit einigen Modellen experimentiert hatten, stellten wir fest, dass es hauptsächlich die folgenden Probleme gab:

• Man hat gelernt, dass es bei Android und IOS Unterschiede im Auf- und Ab-Zustand der Softtastatur gibt und sich die Seiten-Webansicht unterschiedlich verhält.
• Unter IOS12, WeChat-Version v6.7.4 und höher erhält das Eingabefeld den Fokus, die Tastatur wird angezeigt und die Seite (Webansicht) wird insgesamt nach oben gescrollt. Wenn die Tastatur zurückgezogen wird, kehrt sie nicht in die ursprüngliche Position zurück Die ursprüngliche Position der Tastatur bleibt leer.
• Unter iOS kommt es bei der Verwendung von Eingabemethoden von Drittanbietern zu Abweichungen bei der Höhenberechnung, was dazu führt, dass einige Eingabemethoden auftauchen und das Eingabefeld teilweise blockieren.
• Selbst wenn Sie in einigen Browsern einige Bedientechniken verwenden, wird das Eingabefeld dennoch durch die Eingabemethode blockiert.

Lassen Sie uns nacheinander die Lösungen für die oben genannten Probleme untersuchen.

Es ist wichtig zu wissen, ob die Softtastatur aktiv oder deaktiviert ist, und die spätere Kompatibilitätsverarbeitung muss darauf basieren. H5 überwacht jedoch nicht direkt die nativen Ereignisse der Soft-Tastatur. Es kann die Leistung anderer Aspekte der Seite nur indirekt überwachen, indem es die Soft-Tastatur ein- oder ausklappt und so das Land speichert. Darüber hinaus ist die Leistung unter IOS und Android unterschiedlich.

Wenn unter iOS das Eingabefeld (Eingabe, Textbereich oder Rich Text) den Fokus erhält, wird die Tastatur angezeigt, die Seite (Webansicht) wird nicht komprimiert oder die Höhe (Höhe) ändert sich nicht, die Seite (Webansicht) jedoch als ein Ganzes scrollt nach oben und die maximale Scroll-Höhe (scrollTop) ist die Soft-Tastatur-Höhe.

In ähnlicher Weise erhält das Eingabefeld unter Android den Fokus und die Tastatur wird eingeblendet, die Höhe der Seite (Webansicht) ändert sich jedoch. Im Allgemeinen entspricht die Höhe der Höhe des visuellen Bereichs (ursprüngliche Höhe minus der Höhe der Softtastatur). ), es sei denn, der Seiteninhalt ist Expanding kann zum Scrollen führen, die Webansicht selbst kann jedoch nicht scrollen.

Wenn die Schaltfläche zum Zurückziehen auf der Soft-Tastatur oder im Seitenbereich außerhalb des Eingabefelds ausgelöst wird, verliert das Eingabefeld den Fokus und die Soft-Tastatur wird zurückgezogen.

Wenn ein Bereich außerhalb des Eingabefelds ausgelöst wird, verliert das Eingabefeld den Fokus und die Softtastatur wird zurückgezogen. Wenn jedoch die Einziehtaste auf der Tastatur ausgelöst wird, verliert das Eingabefeld nicht den Fokus und die Softtastatur wird ebenfalls eingefahren.

Basierend auf den oben genannten unterschiedlichen Leistungen beim Ein- und Ausklappen der Tastatur unter iOS und Android können wir die folgende Verarbeitung separat durchführen, um das Ein- und Ausklappen der Softtastatur zu überwachen:

• Hören Sie unter iOS auf das Fokusereignis des Eingabefelds, um zu erfahren, dass die Softtastatur angezeigt wird, und hören Sie auf das Unschärfeereignis des Eingabefelds, um zu erfahren, dass die Softtastatur geschlossen wird.
• Unter Android ändert sich die Höhe der überwachten Webansicht. Wenn die Höhe kleiner wird, wird die Soft-Tastatur eingeblendet, andernfalls wird die Soft-Tastatur geschlossen.

 // Beurteilen Sie den Gerätetyp var JudgeDeviceType = function () { var ua = window.navigator.userAgent.toLocaleLowerCase(); var isIOS = /iphone|ipad|ipod/.test(ua); var isAndroid = /android/.test ( ua); return { isIOS: isIOS, isAndroid: isAndroid }}()// Hören Sie sich die Soft-Tastatur-Popup- und Minimierungs-Ereignisfunktion des Eingabefelds an listenKeybord($input) { if (judgeDeviceType.isIOS) { // IOS-Tastatur wird angezeigt: IOS- und Android-Eingabefelder erhalten den Fokus und die Tastatur wird angezeigt $input.addEventListener('focus', function () { console.log(' IOS-Tastatur wird angezeigt! '); // Vorgang, nachdem die IOS-Tastatur angezeigt wird}, false) // IOS-Tastatur wird eingefahren: IOS Wenn Sie außerhalb des Eingabefelds klicken oder auf die Schaltfläche zum Zurückziehen klicken, verliert das Eingabefeld den Fokus und die Tastatur wird zurückgezogen. $input.addEventListener('blur', () => { console.log('IOS-Tastatur eingefahren!') ; // Vorgang nach dem Einklappen der iOS-Tastatur }) } // Andriod-Tastatur wird eingeklappt: Wenn die Andriod-Tastatur aufgeklappt oder eingeklappt wird, ändert sich die Seitenhöhe und auf dieser Grundlage wird die Tastatur eingeklappt, wenn (judgeDeviceType.isAndroid) { var originHeight = document.documentElement.clientHeight ||. document.body.clientHeight; window.addEventListener('resize', function () { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (originHeight < resizeHeight) { console.log('Android-Tastatur wird weggelegt!' // Vorgang nach dem Weglegen der Android-Tastatur} else { console.log('Android-Tastatur erscheint! '); // Vorgang nach dem Auftauchen der Android-Tastatur} originHeight = resizeHeight; }, false) }}var $inputs = document.querySelectorAll('.input');for (var i = 0; i < $inputs.length; i++) { listenKeybord($inputs[i]);}

Manchmal erstellen wir ein Eingabeformular mit vielen Eingabeelementen. Das Eingabefeld erhält den Fokus und die Softtastatur wird angezeigt. Wenn sich das Eingabefeld unter IOS im unteren Teil der Seite befindet, wird die gesamte Webansicht um einen bestimmten Abstand nach oben gerollt, sodass sich das fokussierte Eingabefeld automatisch im sichtbaren Bereich befindet. Dies ist jedoch unter Android nicht der Fall . Es ändert nur die Höhe der Seite, ohne zum aktuell fokussierten Element in den sichtbaren Bereich zu scrollen.

Da das Obige implementiert wurde, um das Auf- und Abklappen der IOS- und Android-Tastaturen zu überwachen, müssen Sie hier nur das Fokuselement in den visuellen Bereich scrollen (scrollIntoView()), nachdem die Android-Tastatur eingeblendet ist. Um den Effekt zu sehen, können Sie hier klicken.

 // Fokuselement abrufen und zum sichtbaren Bereich scrollen function activeElementScrollIntoView(activeElement, delay) { var editable = activeElement.getAttribute('contenteditable') // Das Eingabefeld, der Textbereich oder der Rich-Text scrollen nach dem Abrufen nicht zum sichtbaren Bereich der Fokusbereich if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) { setTimeout(function () { activeElement.scrollIntoView(); }, delay) }}// ...// ActiveElementScrollIntoView($input, 1000);// ausführen ... nachdem die Android-Tastatur angezeigt wird

In das obige Formulareingabefeld müssen Sie eine Telefonnummer eingeben. Ähnlich wird eine numerische Softtastatur angezeigt. Da es sich um die Kompatibilität einer Softtastatur handelt, fügen wir sie hier ein. Eine bessere Lösung ist wie folgt:

 <p>Bitte geben Sie Ihre Mobiltelefonnummer ein</p><input type=tel novalidate=novalidate pattern=[0-9]* class=input> 

• type=tel ist ein Attribut von HTML5, das angibt, dass der Eingabefeldtyp eine Telefonnummer ist. Es verhält sich auf Android und IOS ähnlich, es gibt jedoch auch Buchstaben, was etwas redundant ist.
• Muster = [0-9], Muster wird verwendet, um den in das Formular eingegebenen Inhalt zu überprüfen, z. B. E-Mail, Telefonnummer, Nummer, Datenklasse, URL usw., und verfügt normalerweise über eine eigene einfache Datenformatüberprüfung Funktion und Muster machen die Überprüfung des Front-End-Teils einfacher und effizienter. Unter IOS kann nur [0-9]/* die Neun-Quadrat-Zifferntastatur aufrufen, /d ist ungültig, und unter Android 4.4 oder niedriger (einschließlich X5-Kernel) können beide die Zifferntastatur aufrufen.
• novalidate = novalidate, das novalidate-Attribut legt fest, dass das Formular beim Senden nicht überprüft wird. Da die Musterüberprüfungskompatibilität nicht gut ist, können Sie die Überprüfung nicht zulassen und nur die reine numerische Tastatur hervorrufen Die Verifizierungsarbeiten werden von js durchgeführt.

Wenn Sie die obige Formulareingabedemo mit iOS 12 und der Version 6.7.4+ des WeChat-Browsers öffnen, werden Sie überrascht sein, dass die Seite, die ursprünglich nach oben gescrollt wurde, nach dem Zurückziehen der Tastatur nicht an die untere Position zurückkehrt, was zu Problemen führt Die ursprüngliche Tastatur zum Abprallen ist leer.

Tatsächlich handelt es sich hierbei um einen Apple-Fehler in iOS, der auf allen IOS12-Geräten auftritt, die mit Xcode10 ausgestattet sind. WeChat hat offiziell eine Lösung bereitgestellt. Scrollen Sie einfach durch die Seite (Webansicht) zurück zur unteren Position des Fensters (ClientHeight-Position), nachdem die Softtastatur geschlossen wurde. Die oben reparierte Formulareingabe-Demo kann hier angeklickt werden

 console.log('IOS-Tastatur wird weggelegt!');// WeChat-Browserversion 6.7.4+IOS12 zeigt an, dass die Ansicht nach dem Weglegen der Tastatur nach oben, aber nicht nach unten verschoben wird. var wechatInfo = window.navigator.userAgent .match( /MicroMessenger//([/d/.]+)/i);if (!wechatInfo) return;var wechatVersion = wechatInfo[1];var version = (navigator.appVersion).match(/OS (/d+)_(/d+)_?(/d+)?/);if (+wechatVersion.replace(//./g, '') >= 674 && +version[1] >= 12) { window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));}

Nachdem ich so viel oben gesagt habe, wurden tatsächlich mehr als die Hälfte der Fallstricke des H5-Chat-Eingabefelds behoben. Werfen wir als Nächstes einen Blick auf die grundlegende HTML-Struktur des Chat-Eingabefelds.

 <div class=chat__content> <div> <p>Einige Chat-Inhalte 1</p> </div> <!--Tausende Zeilen Chat-Inhalt weglassen--></div><div class=input__content> <div class =input contenteditable=true></div> <button>Senden</button></div>

Stil

 /* Einige Stile weglassen */.chat__content { height: calc(100% - 40px); margin-bottom: 40px; Position: absolut; links: 0; unten: align-items;}/* Einige Stile weglassen*/

Es ist sehr einfach, nur den Inhaltsbereich und den Eingabebereich zu trennen. Gemäß der oben genannten Formulareingabe-Demomethode ist es wahr, dass die meisten Android-Browser in Ordnung sind, aber der UC-Browser funktioniert mit Bei der nativen Eingabemethode und bei Eingabemethoden von Drittanbietern (z. B. der Sogou-Eingabemethode) wird das Eingabefeld für den QQ-Browser oder den WeChat-Browser vollständig blockiert. Bei Eingabemethoden von Drittanbietern wird das Eingabefeld zur Hälfte blockiert. Mit dem Baidu-Browser und der Eingabemethode eines Drittanbieters wird das Eingabefeld blockiert Es wird auch vollständig abgedeckt. Um den Effekt zu sehen, können Sie hier im entsprechenden Browser aufrufen.

Im UC-Browser hat die Höhe der Titelleiste über dem Browser nach dem Einblenden der Softtastatur einen verzögerungsdynamischen Effekt der Verringerung der Höhe, was dazu führt, dass die Webansicht etwas nach unten scrollt und das untere Eingabefeld zum nicht- sichtbarer Bereich.

Was die Eingabemethode eines Drittanbieters betrifft, wird spekuliert, dass die anfängliche Scroll-Positionierung der Webansicht aufgrund einer falschen Höhenberechnung nach dem Popup des Eingabemethodenfensters falsch ist. Tatsächlich werden diese beiden Punkte dadurch verursacht, dass die Webansicht nicht an Ort und Stelle scrollt. Nachdem die Soft-Tastatur eingeblendet ist, kann das Fokuselement erneut in den sichtbaren Bereich gescrollt werden, wodurch die Webansicht gezwungen wird, an ihren Platz zu rollen.

 console.log('Android-Tastatur erscheint!');activeElementScrollIntoView($input, 1000);

Im Xiaomi-Browser von Android stellte ich nach Anwendung der oben genannten Lösung fest, dass das Chat-Eingabefeld immer noch fest blockiert war und scrollIntoView () immer noch bewegungslos blieb. Ich vermute also, dass es tatsächlich daran liegt, dass die Soft-Tastatur nach unten gescrollt wurde und die Seitenhöhe beim Einblenden der Soft-Tastatur größer ist als die Höhe des visuellen Bereichs. Auf diese Weise kann die Seitenhöhe erst nach dem Erzwingen erhöht werden Es erscheint eine Softtastatur, sodass das Eingabefeld angezeigt werden kann. Basierend auf dem oben Gesagten ist es mit Eingabemethoden von Drittanbietern kompatibel. Um den Effekt anzuzeigen, können Sie hier klicken.

 // Andriod-Tastatur wird eingefahren: Die Höhe der Seite ändert sich, wenn die Andriod-Tastatur ein- oder ausgefahren wird. Auf dieser Grundlage ist bekannt, dass die Tastatur eingefahren wird, wenn (judgeDeviceType.isAndroid) { var originHeight = document.documentElement.clientHeight ||. body.clientHeight ; window.addEventListener('resize', function () { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; if (originHeight < resizeHeight) { console.log('Android-Tastatur ist geschlossen!'); // Behebung des Problems, dass das Eingabefeld immer noch durch die Eingabemethode im Xiaomi-Browser blockiert ist if (judgeDeviceType.isMiuiBrowser ) { document.body.style.marginBottom = '0px'; } } else { console.log('Android-Tastatur wird angezeigt!'); Behebung des Problems, dass das Eingabefeld immer noch durch die Eingabemethode im Xiaomi-Browser blockiert wird if (judgeDeviceType.isMiuiBrowser) { document.body.style.marginBottom = '40px' } activeElementScrollIntoView($input, 1000); }, FALSCH )}

Das H5-Ende hat einen langen Weg mit vielen Fallstricken vor sich und erfordert ständige Versuche. Es ist eine Voraussetzung, den Leistungsunterschied zwischen der Soft-Tastatur-Popup-Seite auf iOS und Android zu verstehen. Der zweite Schritt besteht darin, das Fokuselement in den sichtbaren Bereich zu scrollen. Gleichzeitig werden die Unterschiede bei den Eingabemethoden von Drittanbietern erkannt Einige Browser müssen berücksichtigt werden.

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.