Ich schreibe eine Web-App für das iPad ( keine reguläre App Store-App - sie wurde mit HTML, CSS und JavaScript geschrieben). Da die Tastatur einen großen Teil des Bildschirms ausfüllt, ist es sinnvoll, das Layout der App so zu ändern, dass es dem verbleibenden Platz entspricht, wenn die Tastatur angezeigt wird. Ich habe jedoch keine Möglichkeit gefunden, festzustellen, wann oder ob die Tastatur angezeigt wird.
Meine erste Idee war anzunehmen, dass die Tastatur sichtbar ist, wenn ein Textfeld den Fokus hat. Wenn jedoch eine externe Tastatur an ein iPad angeschlossen ist, wird die virtuelle Tastatur nicht angezeigt, wenn ein Textfeld den Fokus erhält.
In meinen Experimenten hatte die Tastatur auch keinen Einfluss auf die Höhe oder Bildlaufhöhe eines der DOM-Elemente, und ich habe keine proprietären Ereignisse oder Eigenschaften gefunden, die angeben, ob die Tastatur sichtbar ist.
Antworten:
Ich habe eine Lösung gefunden, die funktioniert, obwohl sie etwas hässlich ist. Es wird auch nicht in jeder Situation funktionieren, aber es funktioniert für mich. Da ich die Größe der Benutzeroberfläche an die Fenstergröße des iPad anpasse, kann der Benutzer normalerweise nicht scrollen. Mit anderen Worten, wenn ich das scrollTop des Fensters einstelle, bleibt es bei 0.
Wenn andererseits die Tastatur angezeigt wird, funktioniert das Scrollen plötzlich. So kann ich scrollTop einstellen, seinen Wert sofort testen und dann zurücksetzen. So könnte das mit jQuery im Code aussehen:
Normalerweise würden Sie erwarten, dass dies für den Benutzer nicht sichtbar ist. Leider rollt das iPad zumindest beim Ausführen im Simulator sichtbar (wenn auch schnell) wieder auf und ab. Trotzdem funktioniert es zumindest in bestimmten Situationen.
Ich habe dies auf einem iPad getestet und es scheint gut zu funktionieren.
quelle
.scrollTop(1)
genauso gut funktionieren und weniger offensichtlich sein?Sie können das Focusout- Ereignis verwenden, um eine Tastaturentlassung zu erkennen. Es ist wie Unschärfe, aber Blasen. Es wird ausgelöst, wenn die Tastatur geschlossen wird (aber natürlich auch in anderen Fällen). In Safari und Chrome kann das Ereignis nur mit addEventListener registriert werden, nicht mit älteren Methoden. Hier ist ein Beispiel, mit dem ich eine Phonegap-App nach dem Entlassen der Tastatur wiederhergestellt habe.
Ohne dieses Snippet blieb der App-Container bis zur Seitenaktualisierung in der nach oben gescrollten Position.
quelle
Vielleicht ist eine etwas bessere Lösung, das "Unschärfe" -Ereignis (in meinem Fall mit jQuery) an die verschiedenen Eingabefelder zu binden.
Dies liegt daran, dass beim Verschwinden der Tastatur alle Formularfelder unscharf werden. Für meine Situation löste dies das Problem.
ich hoffe es hilft. Michele
quelle
Wenn eine Bildschirmtastatur vorhanden ist, führt das Fokussieren eines Textfelds am unteren Rand des Ansichtsfensters dazu, dass Safari das Textfeld in die Ansicht scrollt. Es gibt möglicherweise eine Möglichkeit, dieses Phänomen auszunutzen, um das Vorhandensein der Tastatur zu erkennen (mit einem winzigen Textfeld am unteren Rand der Seite, das momentan den Fokus erhält, oder so ähnlich).
quelle
Während des Fokusereignisses können Sie über die Dokumenthöhe und auf magische Weise über das Fenster scrollen. Die Höhe wird durch die Höhe der virtuellen Tastatur verringert. Beachten Sie, dass die Größe der virtuellen Tastatur für Quer- und Hochformat unterschiedlich ist. Sie müssen sie daher erneut erkennen, wenn sie sich ändert. Ich würde davon abraten, sich diese Werte zu merken, da der Benutzer jederzeit eine Bluetooth-Tastatur verbinden / trennen kann.
Beachten Sie, dass bei Verwendung einer Bluetooth-Tastatur die Höhe der Tastatur 44 beträgt. Dies entspricht der Höhe der Symbolleiste [Zurück] [Weiter].
Es gibt ein kleines Flackern, wenn Sie diese Erkennung durchführen, aber es scheint nicht möglich zu sein, dies zu vermeiden.
quelle
Bearbeiten: Von Apple dokumentiert, obwohl ich es nicht zum Laufen bringen konnte: WKWebView- Verhalten mit Tastaturanzeigen : "In iOS 10 entsprechen WKWebView-Objekte dem nativen Verhalten von Safari, indem sie ihre window.innerHeight-Eigenschaft aktualisieren, wenn die Tastatur angezeigt wird, und rufen nicht auf Ereignisse in der Größe ändern "(kann möglicherweise Fokus oder Fokus plus Verzögerung verwenden, um die Tastatur zu erkennen, anstatt die Größe zu ändern).
Bearbeiten: Code setzt Bildschirmtastatur voraus, keine externe Tastatur. Lassen Sie es, weil Informationen für andere nützlich sein können, die sich nur für Bildschirmtastaturen interessieren. Verwenden Sie http://jsbin.com/AbimiQup/4 , um Seitenparameter anzuzeigen.
Wir testen, ob
document.activeElement
es sich um ein Element handelt, das die Tastatur anzeigt (Eingabetyp = Text, Textbereich usw.).Der folgende Code fummelt Dinge für unsere Zwecke (obwohl nicht allgemein korrekt).
Der obige Code ist nur ungefähr: Er ist falsch für geteilte Tastatur, nicht angedockte Tastatur und physische Tastatur. Laut Kommentar oben können Sie möglicherweise einen besseren Job als den angegebenen Code auf Safari (seit iOS8?) Oder WKWebView (seit iOS10) mit machen
window.innerHeight
Eigenschaft .Ich habe unter anderen Umständen Fehler festgestellt: z. B. den Fokus auf die Eingabe legen, dann zum Startbildschirm gehen und dann zur Seite zurückkehren; Das iPad sollte das Ansichtsfenster nicht verkleinern. alte IE-Browser funktionieren nicht, Opera hat nicht funktioniert, da Opera nach dem Schließen der Tastatur den Fokus auf das Element gelegt hat.
Die markierte Antwort (Ändern des Bildlauffelds zum Messen der Höhe) hat jedoch unangenehme Nebenwirkungen auf der Benutzeroberfläche, wenn das Ansichtsfenster zoombar ist (oder das Zoomen in den Einstellungen aktiviert ist). Ich verwende nicht die andere vorgeschlagene Lösung (Ändern des Bildlaufs), da unter iOS, wenn das Ansichtsfenster zoombar ist und zur fokussierten Eingabe gescrollt wird, fehlerhafte Interaktionen zwischen Scrollen & Zoomen & Fokussieren auftreten (die eine nur fokussierte Eingabe außerhalb des Ansichtsfensters belassen können - nicht sichtbar).
quelle
Nur auf Android 4.1.1 getestet:
Das Unschärfeereignis ist kein zuverlässiges Ereignis zum Testen der Tastatur nach oben und unten, da der Benutzer als Option zum expliziten Ausblenden der Tastatur ein Unschärfeereignis auf dem Feld auslöst, durch das die Tastatur angezeigt wurde.
Das Größenänderungsereignis funktioniert jedoch wie ein Zauber, wenn die Tastatur aus irgendeinem Grund nach oben oder unten geht.
Kaffee:
Wird immer dann ausgelöst, wenn die Tastatur aus irgendeinem Grund angezeigt oder ausgeblendet wird.
Beachten Sie jedoch, dass es im Fall eines Android-Browsers (anstelle einer App) eine einziehbare URL-Leiste gibt, die beim Zurückziehen keine Größenänderung auslöst, jedoch die verfügbare Fenstergröße ändert.
quelle
Versuchen Sie, die Größe des Fensters zu ermitteln, anstatt die Tastatur zu erkennen
Wenn die Höhe des Fensters verringert wurde und die Breite immer noch gleich ist, bedeutet dies, dass die Tastatur eingeschaltet ist. Wenn die Tastatur nicht ausgeschaltet ist, können Sie auch hinzufügen, ob ein Eingabefeld scharfgestellt ist oder nicht.
Versuchen Sie diesen Code zum Beispiel.
quelle
Diese Lösung merkt sich die Bildlaufposition
quelle
Probier diese:
quelle
Wie in den vorherigen Antworten erwähnt, wird die Variable window.innerHeight jetzt unter iOS10 ordnungsgemäß aktualisiert, wenn die Tastatur angezeigt wird. Da ich die Unterstützung für frühere Versionen nicht benötige, habe ich den folgenden Hack entwickelt, der möglicherweise etwas einfacher ist als der diskutierte "Lösungen".
dann können Sie verwenden:
um zu überprüfen, ob die Tastatur sichtbar ist. Ich benutze es jetzt schon eine Weile in meiner Web-App und es funktioniert gut, aber (wie bei allen anderen Lösungen) kann es vorkommen, dass es fehlschlägt, weil die "erwartete" Größe nicht richtig aktualisiert wird oder so.
quelle
Ich habe etwas gesucht und konnte nichts Konkretes für ein "auf der Tastatur gezeigt" oder "auf der Tastatur entlassen" finden. Siehe die offizielle Liste der unterstützten Veranstaltungen . Siehe auch Technischer Hinweis TN2262 für iPad. Wie Sie wahrscheinlich bereits wissen, gibt es ein Körperereignis, das
onorientationchange
Sie verkabeln können, um Quer- / Hochformat zu erkennen.Ähnlich, aber eine wilde Vermutung ... haben Sie versucht, die Größenänderung zu erkennen? Änderungen am Ansichtsfenster können dieses Ereignis indirekt über die angezeigte / ausgeblendete Tastatur auslösen.
Was einfach die neue Höhe bei jedem Größenänderungsereignis alarmieren würde ...
quelle
Ich habe es selbst nicht versucht, also ist es nur eine Idee ... aber haben Sie versucht, Medienabfragen mit CSS zu verwenden, um zu sehen, wann sich die Höhe des Fensters ändert, und dann das Design dafür zu ändern? Ich würde mir vorstellen, dass Safari Mobile die Tastatur nicht als Teil des Fensters erkennt, sodass dies hoffentlich funktionieren würde.
Beispiel:
quelle
Das Problem ist, dass Geräte auch im Jahr 2014 Ereignisse zur Größenänderung des Bildschirms sowie Bildlaufereignisse uneinheitlich verarbeiten, während die Softtastatur geöffnet ist.
Ich habe festgestellt, dass insbesondere iOS einige seltsame Layoutfehler auslöst, selbst wenn Sie eine Bluetooth-Tastatur verwenden. Anstatt eine weiche Tastatur zu erkennen, musste ich nur auf Geräte zielen, die sehr schmal sind und über Touchscreens verfügen.
Ich verwende Medienabfragen (oder window.matchMedia ) zur Breitenerkennung und Modernizr zur Erkennung von Berührungsereignissen.
quelle
Vielleicht ist es einfacher, in den Einstellungen Ihrer App ein Kontrollkästchen zu aktivieren, mit dem der Benutzer die Option "Externe Tastatur angeschlossen" aktivieren kann.
Erklären Sie dem Benutzer im Kleingedruckten, dass externe Tastaturen in heutigen Browsern derzeit nicht erkennbar sind.
quelle
Nun, Sie können erkennen, wann Ihre Eingabefelder den Fokus haben, und Sie kennen die Höhe der Tastatur. Es gibt auch CSS, um die Ausrichtung des Bildschirms zu erhalten, also denke ich, dass Sie es hacken können.
Sie möchten jedoch irgendwie mit dem Fall einer physischen Tastatur umgehen.
quelle