2015-11-12 6 views
7

Dies ist für eine HTML5/Javascript WebApp, keine native Android-App.Verhindern Dokument Reflow/Browser Größe ändern, wenn Android-Tastatur öffnet

Wie verhindere ich, dass der Browser/das DOM meinen Inhalt ändert (welcher reagiert, meistens vw/vh für Größen usw.), wenn sich die android-Tastatur öffnet? Was passiert ist, ändert sich der Inhalt, insbesondere die Schriftgröße, sobald die Tastatur geöffnet wird (zum Beispiel bei Eingabefeldern). Was ich will, erreichen, ist, dass die Tastatur fungiert als Overlay und den Inhalt unter scrollbaren wird

bereits Ich habe

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

gesetzt. Also im Grunde, was android:windowSoftInputMode in einem Android-Manifest tun würde.

Ich habe auch versucht, das Fenster Größe ändern Ereignis und verhindern, wenn die Größe der Größe in einem bestimmten Bereich ist (siehe this answer zu einer anderen Frage). Was aber hier passiert, ist, dass sich die Tastatur öffnet und sofort wieder schließt. (*)

Also meine Grundideen sind:

  • verhindern, dass der Browser von den neuen Größen Berechnung (als ob kein Resize geschehen)
  • die Tastatur eingestellt als Overlay zu handeln, nicht ein einzelnes Element Ändern der Größe des Fensters
  • die Tastatur offen halten in meinem bereits verhindern resize-Methode getestet (*)

Aber ich kann eine funktionierende Lösung für jede dieser nicht herausgefunden.

+0

@NikolaLukic: Ziemlich sicher, es soll eine regelmäßige Webapp (daher der erste Satz sein: „* Dies ist für eine HTML5/Javascript WebApp. * "). Auch für Interesse stoßen. –

Antwort

0

Ok, das ist fix für HTML5 (Browser) App.

var isKeyboardOpen = false; 

    //Override onresize event if you have it already just insert code 
    // also you can check id of element or any other parameters 
    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "input") { 

    // regular onresize 

    } 
    else{ 

    // avoid resize 

    } 

// Um ​​zu überprüfen, ist es Tastatur geöffnet Gebrauch diesen Code

window.addEventListener ('native.showkeyboard', keyboardShowHandler);

window.addEventListener('native.hidekeyboard', keyboardHideHandler); 

function keyboardShowHandler(e){ 
isKeyboardOpen = true; //always know status 
} 

function keyboardHideHandler(e){ 
isKeyboardOpen = false; 
} 

zunächst versuchen, durch Setzen der Flagge zu verhindern:

var object = document.getElementById("IwillOpenKeyboardOnMobile") 
object.addEventListener("focus", ONFOCUSELEMENT); 

function ONFOCUSELEMENT() { 
isKeyboardOpen = true; 
} 

// opposite event is blur 
Verwandte Themen