Bildschirmgestaltung, wenn die virtuelle Tastatur aktiv ist

74

Idealerweise möchte ich, dass die gesamte Benutzeroberfläche ein benutzerdefiniertes Design hat , das auf dem iOS (itouch / ipad) oder Android-Äquivalent mit der vorhandenen virtuellen Tastatur angezeigt wird. Siehe unten für weitere Details.

Ein benutzerdefinierter Satz von CSS-Hacking-Regeln, die aktiv sind, wenn die Tastatur "vorhanden" ist, ist ebenfalls eine akzeptable Lösung.

Zielt sowohl auf Androiden als auch auf iOS auf einer Website ab (HTML / JavaScript / CSS). Beachten Sie außerdem, dass das darin enthaltene Layout "flüssig" ist.

Bearbeiten: Dies war mehr Design als Text; Die Änderungen sind also nicht desorientierend. Auf der untersten Ebene wünsche ich mir nur eine Designänderung mit und ohne die virtuellen Schlüssel (vielleicht nur eine Hintergrundänderung).

Die Frage, bei der es sich um eine gute oder schlechte Designidee handelt, ist umstritten. Ich halte es jedoch für irrelevant für die Frage. Für einen solchen Exploit kann mehr als nur Text verwendet werden (z. B. Spiele oder interaktive Medien).

Daher die Prämie: Obwohl ich für das Projekt, an dem ich arbeitete, keine Antwort mehr brauchte (es wurde ein alternatives Design verwendet). Ich glaube immer noch, dass diese Frage von einer Beantwortung profitieren kann.

Standardverhalten

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Gewünschtes Verhalten

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+
PicoCreator
quelle
9
Warum? Es ist ärgerlich, wenn Dinge verschwinden, wenn Sie versuchen zu tippen, aber eine drastische Größenänderung kann es sichtbar machen, aber schwierig oder unmöglich, sie tatsächlich zu lesen. (Ich weiß nicht, was iOS macht, aber auf meinem Android-Handy ist es sehr schwer zu lesen, wenn Sie die Größe des Inhalts so ändern.) Planen Sie dies sowohl im Hoch- als auch im Querformat? Übrigens schöne ASCII-Kunst.
nnnnnn
2
@nnnnnn Es ist ein flüssiges Layout, daher wird die Größe der Textschrift nicht geändert (bleibt gleich). Ich möchte nur, dass sich die beiden separaten Eingabefelder (oben und unten) neu positionieren und beide sichtbar sind. Der irrelevante Center-Inhalt würde jedoch höchstwahrscheinlich "versteckt" werden. Und es ist sowohl für Porträt als auch für Landschaft (obwohl praktisch nur Porträt Sinn machen würde)
PicoCreator
4
+1 zu dem, was nnnnn gesagt hat. Ihre Benutzer erwarten dieses Verhalten nicht und verstehen es nicht. Lass es so wie es ist.
Ryan Shillington
@RyanShillington: Fließendes Layout, die Annahme ist, dass die gesamte Region Text ist, alles, was es sein könnte, ist eine einzeilige Texteingabe, der Rest ist ein dynamischer Hintergrund, der auf die aktualisierte Größe reagiert (anstatt auf "nirgendwo" überzugehen).
PicoCreator
1
Sie könnten versuchen, ein zweites Layout zu verwenden, das nur angezeigt wird, wenn die Tastatur sichtbar ist
Andreas

Antworten:

21

Ich bin mir nicht sicher, ist das der gewünschte Effekt? Überprüfen Sie diesen Link

http://jsfiddle.net/UHdCw/3/

Aktualisieren

(1). Angenommen, es handelt sich um eine Website, die im Gerätebrowser ausgeführt wird. Dann können wir das Vorhandensein einer virtuellen Tastatur überprüfen, indem wir die Bildschirmgröße überprüfen.

Checken Sie im Gerätebrowser ein - http://jsfiddle.net/UHdCw/8/show/

Code: - http://jsfiddle.net/UHdCw/8/

(2). Wenn Sie eine native App mit HTML5 und Phonegap erstellen, sieht das anders aus. Da es keinen direkten API-Hook gibt, um den Keybord-Status zu überprüfen, müssen wir unser eigenes Plugin in Phonegap schreiben .

In Android können Sie den Ein- / Ausblendstatus der Tastatur mithilfe des nativen Codes überprüfen [ hier prüfen ]. und müssen Phonegap Plugin schreiben, um diese Ereignisse in unserem HTML zu bekommen.

[Phonegap ist ein Beispiel. Ich denke, dass die meisten HTML-Frameworks für native Frameworks diese Art von Glückseligkeit haben, um sich mit nativem Code zu verbinden.]

iOS-Update

Wie Sie sagten, ändert sich Höhe / Position nicht, wenn die Tastatur vorhanden ist. Wir können eines tun: Wenn die Eingabe den Fokus erhält, können wir eine Verkleinerungsklasse hinzufügen und die Elementgrößen reduzieren. Überprüfen Sie den folgenden Link.

http://jsfiddle.net/UHdCw/28/show/

Praveen Vijayan
quelle
1
+1 zum Ausprobieren: Ja, ein benutzerdefiniertes Styling, wenn die Tastatur aktiv ist ... und es ist auch ein Beispiel dafür, wie sich der Inhalt ändern kann, ohne die Dinge zu kompliziert zu machen. Nur die Bildgröße wird geändert: nicht der Text ... Es fehlt jedoch Der wichtigste Punkt ist, wie man die aktive native Tastatur erkennt. >. <(keine benutzerdefinierte)
PicoCreator
Keine Sorge, es sind nur Website- und Gerätebrowser ... Und nein, es hat unter iOS nicht funktioniert, da die Größe des Browsers nicht geändert wird und der gesamte Block nach oben verschoben wird. Dies verhindert zwar Layoutänderungen, verhindert jedoch die Erkennung von Größenänderungen ... Was eine gute Idee war = DI hoffte ehrlich, dass es funktionieren würde, und hielt es für sinnvoll.
PicoCreator
hmm .. ich habe es unter iOS nicht überprüft. In meiner Galaxie S. hat es gut funktioniert.
Lassen Sie uns
Scheint ein guter Hack zu sein, wenn man die ios-Erkennung zusammenmischt. =) Du bekommst das Kopfgeld für deine Erkundungsbemühungen.
PicoCreator
Danke für das Kopfgeld :)
Praveen Vijayan
15

Ich habe das gleiche Problem festgestellt, das funktioniert bei mir:

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script> 
Benone
quelle
11
Wie kann das funktionieren? Wenn ich verstanden habe, dass das Meta-Tag beim Laden des Dokuments geschrieben wird, bedeutet dies, dass das Problem auftreten sollte, wenn der Benutzer ein Element fokussiert und nach dem Laden der Seite eine Tastatur geöffnet hat ...
Yuki
Andere Geräte, die nicht Android sind, verfügen möglicherweise (wahrscheinlich) auch über eine virtuelle Tastatur, sodass diese Lösung für sie nicht funktioniert. Daher sollte eine os-spezifische Lösung niemals verwendet werden, es sei denn, allen Benutzern wird garantiert , dass sie dieses Betriebssystem verwenden.
vsync
12

Lassen Sie JavaScript eine Klasse auf den Body anwenden, wenn ein Eingabeelement vorhanden ist focus.

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

Verwenden Sie dann @mediaAbfragen, um festzustellen, ob die mobile Ansicht:

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

Mit dieser Kombination können Sie die Seite bei aktivierter Tastatur auf Mobilgeräten stilisieren. Vielen Dank.

duftend
quelle
1
+1 Obwohl diese Lösung bei angeschlossener externer Tastatur zu einem falsch positiven Ergebnis führen würde, ist sie immer noch viel besser als die Berechnung der Höhe eines Elements (der Benutzer kann sein Telefon drehen, seinen Bildschirm teilen. FFS, sogar Desktop-Benutzer können die Fenstergröße ändern).
Kamil Bęben
Es ist auch möglich, die virtuelle Tastatur unter Android vom Bildschirm zu entfernen (möglicherweise auch unter iOS?), Während der Fokus eines Textfelds beibehalten wird.
Chunky Chunk
4

Ich hatte genau das gleiche Problem. Hier ist meine bisherige Lösung. Ich würde mich freuen, wenn jemand auf Apple testen könnte: http://jsfiddle.net/marcchehab/f2ytsu8z/show (um den Quellcode und alles zu sehen: http://jsfiddle.net/marcchehab/f2ytsu8z )

Ich erkenne auf folgende Weise , ob die Tastatur ausgefallen ist: Beim Laden berechne ich eine Variable "summedges", die $ (Fenster) .width () + $ (Fenster) .height () ist. Dann vergleiche ich im Fall von $ (Fenster) .resize (): Wenn die Summe $ (Fenster) .width () + $ (Fenster) .height () kleiner als "summedges" geworden ist, bedeutet dies, dass die Tastatur ist aus. Dies funktioniert hier auf Chrome unter Android. Sie können diesen Code ganz einfach anpassen, um zu tun, was Sie möchten.

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

Mit jQuery konnte ich keinen reibungslosen Übergang erzwingen, wenn Sie auf eine Eingabe klicken und die Tastatur herausspringt. Aber es ist vielleicht möglich, das System auszutricksen: In der Geige habe ich eine gefälschte Eingabe eingerichtet (blau). Wenn Sie darauf klicken, wird die reale Eingabe direkt unter meinem Display (gelb) angezeigt und ausgewählt. Auf diese Weise sieht alles hier auf Chrome unter Android reibungslos aus. Auch hier würde ich mich freuen, wenn ihr testen könntet.

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
Marc Chéhab
quelle
Ich
arbeite
2

Ich verwende eine einfache CSS-Medienabfrage, um aktive Eingaben auf Mobiltelefonen bei geöffneter Tastatur an den oberen Bildschirmrand zu verschieben. So etwas wie dieses Barebone-Beispiel:

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}
Cronoklee
quelle