Evitar el reflujo de documentos / el tamaño del navegador cuando se abre el teclado de Android
Esto es para un HTML5 / Javascript WebApp, no una aplicación androide nativa.
¿Cómo evito que el navegador / DOM modifique el tamaño de mi contenido (que es sensible, en su mayoría vw / vh para tamaños, etc.), cuando se abre el teclado virtual android? Lo que ocurre es que el contenido, especialmente los tamaños de fuente, cambia una vez que se abre el teclado (en campos de entrada, por ejemplo).
- Soporte de selector de archivos en el teléfono para ios y Android
- PhoneGap + API de Google Maps v3: no se muestra (en absoluto) en Android
- Cómo detectar el pellizco del androide zoom en javascript
- ¿Cómo puedo forzar a los elementos dentro de un elemento de posición fija a responder a eventos javascript onclick en el navegador web de Android?
- "Evalúe esta aplicación" en Google Store Store en la aplicación de Ionic
Ya me he puesto
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Lo que quiero lograr es, que el teclado actúa como una superposición y el contenido de debajo se convierte desplazable. Así que básicamente, lo que android:windowSoftInputMode
haría en un manifiesto android.
También intenté escuchar el evento de redimensionamiento de ventana y evitarlo, cuando la cantidad de cambio de tamaño está en un cierto rango (vea esta respuesta a otra pregunta). Pero lo que sucede aquí, es el teclado se abre e inmediatamente después se cierra de nuevo. (*)
Así que mis ideas básicas son:
- Evitar que el navegador calcula los nuevos tamaños (como si no hubiera cambiado el tamaño)
- Configurar el teclado para que actúe como una superposición, no un elemento individual que cambia el tamaño de la ventana
- Mantener el teclado abierto en mi método de prevent-resize (ya probado) (*)
Pero no puedo encontrar una solución de trabajo para ninguno de estos.
- JavascriptInterface en el WebView de Android: múltiples llamadas a JS causan interbloqueo
- PushState en Android 4.0
- En la vista web de Android cuando ejecuto javascript desaparece el sotfkeyboard
- ¿Cómo puede Android escribir un valor en HTML5 localstorage?
- Uso de LogCat para la depuración USB android del navegador
- JQuery Data Time selector que funciona bien en iOS / Android
- Subclase de JavaScript en Parse.com
- Acceso denegado utilizando almacenamiento local en Android WebView
Ok, esto es arreglar para la aplicación html5 (navegador).
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 }
// Para comprobar si es teclado abierto use este código
Window.addEventListener ('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler); function keyboardShowHandler(e){ isKeyboardOpen = true; //always know status } function keyboardHideHandler(e){ isKeyboardOpen = false; }
Intentar inicialmente prevenir mediante el establecimiento de la bandera:
var object = document.getElementById("IwillOpenKeyboardOnMobile") object.addEventListener("focus", ONFOCUSELEMENT); function ONFOCUSELEMENT() { isKeyboardOpen = true; } // opposite event is blur
- Tablas de la barra de herramientas de Android en la parte inferior de la pantalla
- WindowActivityBar = falso no funciona