webentwicklung-frage-antwort-db.com.de

Wie kann ich das HTML-Element am unteren Bildschirmrand sichtbar halten, wenn die Softtastatur unter iOS Safari geöffnet ist?

Auf einer Webseite habe ich ein Eingabefeld und ein Div, das am unteren Rand des Fensters befestigt ist (mit den folgenden CSS-Eigenschaften: position:fixed; und bottom:0;

Ich habe einen Codepen erstellt, um zu zeigen, wovon ich spreche: https://codepen.io/anon/pen/xpQWbb/

Chrome unter Android lässt das div auch dann sichtbar, wenn die Softtastatur geöffnet ist:

 enter image description here

Safari unter iOS scheint jedoch die Softtastatur über das feste Element zu ziehen:

 enter image description here

(Ich sollte erwähnen, dass ich auf meinem Macbook den iOS-Simulator teste, da ich kein funktionierendes iPhone habe.)

Gibt es eine Möglichkeit, iOS Safari so zu gestalten, dass das Element auch dann sichtbar bleibt, wenn die Softtastatur geöffnet ist, wie es Chrome tut?

10
Andreyu

ich habe das schon mal erlebt. Was ich damals tat, war: 

  1. Erstellen Sie einen Listener, wenn die Tastatur gedrückt wird.
  2. Wenn die Tastatur gedrückt wird, ändern Sie die Größe Ihres Webview mit der Bildschirmhöhe - Tastaturhöhe.
  3. Um diesen Trick auszuführen, müssen Sie sicherstellen, dass Ihr HTML-Code anspricht.

Ich kann mehr Code auf der Seite IOS anzeigen. Wenn Sie interessiert sind, kann ich meine Antwort bearbeiten und Ihnen meinen IOS-Code anzeigen. Vielen Dank.

Hallo nochmal, Entschuldigung, ich habe mich geirrt, ich dachte, Sie würden Apps mit Webview erstellen. Wenn Sie dies immer noch tun möchten, indem Sie die Tastatur anhören, habe ich immer noch Arbeit für Sie. Es ist vielleicht nicht der perfekte Weg, aber ich glaube, dass dies funktionieren wird, wenn Sie es versuchen wollen. Hier mein Vorschlag: 

  1. Sie können immer noch Listener von der Webseite haben, wenn die Tastatur aktiv ist. Sie können einen Listener in Ihr Textfeld setzen, indem Sie "onkeyup" oder "onfocus" verwenden.
  2. Dann wissen Sie, wann die Eingabe getroffen wurde, und die Tastatur wird angezeigt.
  3. Dann können Sie in Ihrem Java-Skript eine Bedingung erstellen, um Ihren Bildschirm zu bearbeiten.

Hoffe, das gibt dir einen Einblick, Freund. @ Beaniie danke dir!.

Hallo Andreyu! Ja richtig, wir können die Tastaturhöhe nicht kennen, nicht wie mein Fall mit WebView, ich kann die Tastaturhöhe durch IOS Code kennen. Ich habe eine andere Arbeit, die nicht so schlau ist, aber vielleicht funktioniert. Sie können die Bildschirmgröße ermitteln und mit einem Array von IOS Gerätebildschirmgröße vergleichen. Dann können Sie die Höhe der Tastatur einschränken, indem Sie durch IOS -Geräte blicken. Viel Glück Freund.

2
Bhimbim

Versuchen Sie, position:absolute und height:100% für die gesamte Seite zu verwenden.

Wenn das System die Tastatur anzeigt, wird es über dem Inhalt der App abgelegt. Sie können sowohl die Tastatur als auch die Objekte verwalten, indem Sie sie in einen UIScrollView object oder eine seiner Unterklassen wie UITableView einbetten. Beachten Sie, dass UITableViewController die Tabellenansicht automatisch skaliert und neu positioniert, wenn Textfelder inline bearbeitet werden.

Wenn die Tastatur angezeigt wird, müssen Sie lediglich den Inhaltsbereich der Bildlaufansicht zurücksetzen und das gewünschte Textobjekt in die gewünschte Position verschieben. Daher würde Ihre Handler-Methode als Antwort auf eine UIKeyboardDidShowNotification Folgendes ausführen:

1.Geben Sie die Größe der Tastatur an.

2.Stellen Sie den unteren Inhalt der Scroll-Ansicht um die Höhe der Tastatur ein.

3.Scrollen Sie das Zieltextfeld in die Ansicht.

Weitere Informationen finden Sie in der Apple-Entwicklerrichtlinie: https://developer.Apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

0
Elfin forest

Nein, das geht nicht. 

Die Tastatur ist nicht Teil des Browserprozesses, und der Browser kann nicht wissen, wann die Tastatur geöffnet wurde. Alles, was es weiß, ist, dass die Größe angepasst wird, wenn dies der Fall ist. Es ist die Entscheidung des Betriebssystems, die Größe des Browsers (oder einer anderen App, die die Tastatur anfordert) zu ändern oder die Tastatur einfach darüber zu zeichnen, und der Browser hat keine Kontrolle über ihn und keine programmierbare Methode, um zu bestimmen, wann dies geschieht. 

Als Randbemerkung sollten Sie position:fixed nur für einen winzigen Menüöffner (und möglicherweise für das Menü selbst, wenn geöffnet) auf mobilen Geräten verwenden.

0

Check out dieser Thread , es handelt sich um eine Problemumgehung, die in Bezug auf Code möglicherweise praktikabler ist. Kurz gesagt geht es darum, die Höhe der Tastatur zu verwenden, um den Inhalt sichtbar zu machen. Alles in allem ist es ein bisschen hackig, es kann schwierig sein, die exakte Höhe der Tastatur zwischen Geräten festzulegen.

Aufgrund der Natur der IOs Safari-Tastatur ist sie leider nicht Teil des Browser-Ansichtsfensters und kann daher nicht wie bei typischen Elementen referenziert werden.

@ Bhimbims Antwort kann auch ein guter Schuss sein.

Grüße, - B

0
Beaniie