it-swarm.com.de

Bildschirmstil, wenn die virtuelle Tastatur aktiv ist

Idealerweise möchte ich, dass die gesamte Oberfläche ein benutzerdefiniertes Styling hat, das auf dem ios (iTouch/ipad) oder Android äquivalent zu angezeigt wird die virtuelle Tastatur vorhanden. Siehe unten für weitere Details.

Eine benutzerdefinierte Einstellung der CSS-Hacking-Regeln, die aktiviert werden soll, wenn die Tastatur "vorhanden" ist, ist ebenfalls eine akzeptable Lösung.

Gilt sowohl für Android als auch für iOS auf einer Website (HTML/JavaScript/CSS). Beachten Sie auch, dass das Layout darin wie folgt lautet: "flüssig".

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

Die Frage, ob dies eine gute oder eine schlechte Designidee ist, ist umstritten. Ich bin jedoch der Meinung, dass diese Frage irrelevant ist. Für einen solchen Exploit kann mehr als Text verwendet werden (z. B. Spiele oder interaktive Medien).

Daher das Kopfgeld: Obwohl ich die Antwort für das Projekt, an dem ich arbeitete, nicht mehr benötigte (es wurde ein alternatives Design verwendet). Ich glaube immer noch, dass diese Frage von der 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  | |
| +--------+ |       | +--------+ |
+------------+       +------------+
65
PicoCreator

Ich bin mir nicht sicher, ob dies der gewünschte Effekt ist. Überprüfen Sie diesen Link

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

Update

(1). Angenommen, es ist eine Website und läuft im Gerätebrowser. Dann können wir das Vorhandensein einer virtuellen Tastatur überprüfen, indem wir die Bildschirmgröße überprüfen.

Überprüfen Sie im Gerätebrowser - 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 zur Überprüfung des Keybord-Status gibt, müssen wir unser eigenes Plugin in Phonegap schreiben.

In Android können Sie den Status der Tastatur anzeigen/verbergen, indem Sie den nativen Code verwenden [ hier prüfen ]. und müssen Phonegap Plugin schreiben, um diese Ereignisse in unserem HTML zu bekommen.

[Phonegap ist ein Beispiel. Ich denke, die meisten HTML-Dateien in nativen Frameworks haben diese Glückseligkeit, sich mit nativem Code zu verbinden.]

iOS-Update

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

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

21
Praveen Vijayan

Ich bin auf das gleiche Problem gestoßen, 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> 
14
benone

JavaScript soll eine Klasse auf body anwenden, wenn ein Eingabeelement focus enthält.

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

Und dann benutze @media Abfragen, 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 geöffneter Tastatur auf Mobilgeräten stilisieren. Vielen Dank.

11
redolent

Ich habe das genaue Problem. Hier ist meine Lösung, ich würde mich freuen, wenn jemand sie 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 "sumedges", die $ (window) .width () ist. + $ (Fenster) .height (). Im Falle von $ (Fenster) .resize () vergleiche ich: Wenn die Summe $ (Fenster) .width () + $ (Fenster) .height () kleiner als "sumedges" geworden ist, bedeutet dies, dass die Tastatur aus. Dies funktioniert hier auf Chrome auf Android. Sie können diesen Code 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 habe ich keine Möglichkeit gefunden, einen reibungslosen Übergang zu 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 einen falschen Eingang eingerichtet (blau). Wenn Sie darauf klicken, wird die reale Eingabe direkt unter meinem Display (gelb) angezeigt und ausgewählt. Auf diese Weise sieht es hier auf Chrome auf Android reibungslos aus. Auch hier würde ich mich freuen, wenn ihr es testen könntet.

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});
0
Marc Chéhab