Cómo detectar el teclado virtual mediante javaScript

Un rodeo para detectar el teclado virtual mediante javaScript

Ekaterina Panikanova

archivado en: JavaScript / 17 septiembre, 2014

En general, para que una web o una aplicación híbrida se adapte a las distintas pantallas de la miríada de dispositivos que hay por el mundo basta con unas CSS bien realizadas, con medidas fluidas, media queries y demás recursos responsive. Sin embargo, en ocasiones tenemos que hacer algunos cambios por javaScript, por lo que debemos detectar cuando se redimensiona la ventana de un navegador, en el caso de los ordenadores, o cuando se cambia la orientación de un dispositivo móvil (de horizontal a vertical y viceversa).

La redimensión de la ventana se detecta fácilmente con javaScript usando el método onresize(); y el cambio de orientación también puede detectarse de forma sencilla con el evento orientationchange; por lo que en circunstancias normales nos valdría algo así:

/* Detecta navegador */

var isAndroid = navigator.userAgent.match(/Android/i) !== null;

var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) !== null;

var isMobile = (isiOS || isAndroid);

...

if ( isMobile ) {

window.addEventListener("orientationchange", function() {

// lo que tenga que suceder

}, false);

} else {

// Si estamos con jQuery:

$(window).on("resize", function() {

// lo que tenga que suceder

});

// o window.onresize si no estamos con jQuery:

window.onresize = funcionResize;

function funcionResizet () {

// lo que tenga que suceder

}

}

Sin embargo, también se redimensiona la ventana de la aplicación móvil cuando aparece el teclado virtual. No se puede, al menos que yo sepa, detectar directamente si está o no visible por javaScript, sino que tenemos que dar un pequeño rodeo:

1. Nada más cargar la aplicación guardamos el ancho y el alto del dispositivo.

2. Colocamos una escucha onresize y cuando se activa cotejamos las dimensiones actuales con las que tenemos guardadas. Si no han cambiado las dos significa que se ha desplegado el teclado virtual y no que ha cambiado la orientación del dispositivo. Algo así:

/* Guardamos estos valores iniciales en localStorage para detectar luego, en resize, si el cambio es por un giro del dispositivo móvil o porque han sacado el teclado */

sessionStorage.setItem("anchoInicial", window.innerWidth);

sessionStorage.setItem("altoInicial",window.innerHeight);

y luego

$(window).on("resize", function() {

if ( isAndroid ) {

anchoInicial = sessionStorage.getItem("anchoInicial");

altoInicial = sessionStorage.getItem("altoInicial");

if ( window.innerHeight != altoInicial && window.innerWidth != anchoInicial ) {

// No es el teclado

} else {

// Es el teclado

}

}

});

No es la solución más elegante del mundo, pero es un punto de partida y nos puede valer si no podemos acceder al código cordova de nuestra aplicación híbrida.

|| Tags: ,

valoración de los lectores sobre Cómo detectar el teclado virtual mediante javaScript

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.