Wie geht das Applet mit dem Tastatur-Overlay-Eingabefeld um (Code beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Handhabung des Tastatur-Overlay-Eingabefelds (mit Code). Ich hoffe, dass es für Sie hilfreich ist.

Wenn sich auf dem mobilen Endgerät das Eingabefeld unten auf der Seite befindet, verdeckt die Tastatur das Eingabefeld. Eine ähnliche Situation tritt auch im Miniprogramm auf, aber das Miniprogramm bietet einiges APIs. Aber es kann die Anforderungen nicht erfüllen.

Das Standardverhalten des Applets

Wenn die Tastatur das Eingabefeld überschreibt, Es wird keine Operation ausgeführt. Im Falle der API schiebt das Miniprogramm den Bildschirm nach oben, bis sich das Eingabefeld knapp über der Tastatur befindet. Mit anderen Worten, wenn es nicht verarbeitet wird, wird die Tastatur des Miniprogramms angezeigt wird das Eingabefeld nicht abdecken. Dies reicht jedoch für meine Bedürfnisse nicht aus, da ein Teil des Inhalts auf der Seite kontinuierlich angezeigt werden muss und ich die Seite nicht nach oben verschieben möchte.

Also ich wird die API des Miniprogramms verwenden, um diese Probleme zu lösen.

cursor-spacing

In einem relativ normalen UI-Design gibt es tatsächlich eine Wrapper-Schicht außerhalb des Es ist offensichtlich, dass das Standardverhalten des Miniprogramms unbekannt ist. Das Ergebnis ist: Der untere Teil dieser Wrapper-Ebene (unterhalb des Eingabefelds) wird sehr hässlich sein >

Führen Sie diesen Apicursor-Abstand ein, stellen Sie ihn so weit ein, wie Sie möchten, und lassen Sie so viel wie Sie möchten unter der Eingabe. Diese Zahl sollte der Abstand vom unteren Rand des Eingabefelds bis zum Ende des Wrappers sein ".

Die Gefahr des Applets ist: Die Einheit im Dokument ist falsch. Sie müssen es ausprobieren, um herauszufinden, was dieses Attribut bedeutet, also ist die Einheit falsch und hat keine Auswirkung. Das macht Eine (meist) Anzahl von Leuten gibt auf. Die richtige Einheit ist

eine Zeichenfolge mit einer Einheit

🎜>

Wie ich gerade erwähnt habe, möchte ich, dass die Seite nicht nach oben verschoben wird, sondern dass das Eingabefeld direkt nach oben verschoben wird.10pxAlso habe ich diese API ausprobiert. Der Standardwert ist true, set Es wird auf „false“ gesetzt. Der Effekt wird: Wenn auf das Eingabefeld geklickt wird, deckt die Tastatur das Eingabefeld perfekt ab.100rpx

Also habe ich den Cursorabstand hinzugefügt und festgestellt, dass diese beiden APIs nicht gleichzeitig wirksam werden können.

Die abschließende Schlussfolgerung lautet also: Die einfache Verwendung der bereitgestellten API kann die Anforderungen nicht erfüllen. Sie können also nur Ereignisse abhören und es selbst tun.

Lösung

Idee für das Eingabefeld für den manuellen Betrieb:

Stellen Sie die Einstellposition auf „false“ ein.

Binden Sie den unteren Stil des Wrappers in das Eingabefeld auf lokale Daten und stellen Sie es auf absolute Positionierung ein.

1. Ändern Sie die Position des Eingabefelds im Fokusereignis.

2. Stellen Sie die Position von wieder her das Eingabefeld im Unschärfeereignis.

3. Dieser Idee folgend bin ich auf mehrere Probleme gestoßen:

Wie bestimme ich die Position des Eingabefelds

4. Ich habe festgestellt, dass die Höhe der Tastatur im Bindfocus-Ereignis ermittelt werden kann. Stellen Sie also einfach den unteren Wert auf die px-Höhe ein >Wenn die relative Positionierung des Eingabefelds nicht am unteren Rand der Seite liegt, wird die Situation komplizierter. Wenn Sie rpx als Einheit verwenden, müssen Sie die Bildschirmbreite und -höhe ermitteln Problem, Sie können das Layout so anpassen, dass der Wrapper relativ zum unteren Rand der Seite positioniert wird.

Das Eingabefeld verliert sofort den Fokus, nachdem der Stil geändert wurde.

Wenn Dies geschieht, das Verhalten ist wie folgt: Wenn auf das Eingabefeld geklickt wird, blinkt der Wrapper des Eingabefelds und kehrt in seine ursprüngliche Position zurück (weil es den Fokus verliert)

Nach vielen Experimenten muss es so sein erledigt Was benötigt wird, ist, eine lokale Variable an das

-Attribut

zu binden und dann wx:if zu verwenden, um das Eingabefeld auszublenden, je nachdem, ob es im Fokus ist oder nicht, ein gefälschtes Eingabefeld einzufügen und Ändern Sie das Fokusattribut, um nach dem Klicken die Tastatur aufzurufen.

Implementierter Code: https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue

Das obige ist der detaillierte Inhalt vonWie geht das Applet mit dem Tastatur-Overlay-Eingabefeld um (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!