Bildschirmgestaltung, wenn die virtuelle Tastatur aktiv ist

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  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

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/

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> 

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.

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();
});

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;
    }
}