javascript porque - Aplicación web iPad: ¿Detecta el teclado virtual usando JavaScript en Safari?




8 Answers

Encontré una solución que funciona, aunque es un poco fea. Tampoco funcionará en todas las situaciones, pero funciona para mí. Como estoy adaptando el tamaño de la interfaz de usuario al tamaño de la ventana del iPad, el usuario normalmente no puede desplazarse. En otras palabras, si configuro el scrollTop de la ventana, permanecerá en 0.

Si, por otro lado, se muestra el teclado, el desplazamiento funciona de repente. Así que puedo configurar scrollTop, probar su valor inmediatamente y luego reiniciarlo. Así es como podría verse en el código, usando jQuery:

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

Normalmente, esperaría que esto no sea visible para el usuario. Desafortunadamente, al menos cuando se ejecuta en el simulador, el iPad se desplaza visiblemente (aunque rápidamente) hacia arriba y hacia abajo. Aún así, funciona, al menos en algunas situaciones específicas.

He probado esto en un iPad, y parece funcionar bien.

mac conectado

Estoy escribiendo una aplicación web para el iPad ( no es una aplicación de la tienda de aplicaciones habitual, está escrita con HTML, CSS y JavaScript). Dado que el teclado ocupa una gran parte de la pantalla, tendría sentido cambiar el diseño de la aplicación para que se ajuste al espacio restante cuando se muestra el teclado. Sin embargo, no he encontrado manera de detectar cuándo o si se muestra el teclado.

Mi primera idea fue suponer que el teclado está visible cuando un campo de texto tiene foco. Sin embargo, cuando se conecta un teclado externo a un iPad, el teclado virtual no aparece cuando un campo de texto recibe el foco.

En mis experimentos, el teclado tampoco afectó la altura o altura de desplazamiento de ninguno de los elementos DOM, y no he encontrado eventos o propiedades que indiquen si el teclado está visible.




tal vez una solución un poco mejor es unir (con jQuery en mi caso) el evento "desenfoque" en los diversos campos de entrada.

Esto porque cuando el teclado desaparece, todos los campos del formulario están borrosos. Entonces, para mi situación, este recorte resolvió el problema.

$('input, textarea').bind('blur', function(e) {

       // Keyboard disappeared
       window.scrollTo(0, 1);

});

Espero eso ayude. Michele




Durante el evento de enfoque puede desplazarse más allá de la altura del documento y mágicamente la ventana. La altura se reduce por la altura del teclado virtual. Tenga en cuenta que el tamaño del teclado virtual es diferente para las orientaciones de paisaje y retrato, por lo que deberá volver a detectarlo cuando cambie. Aconsejaría no recordar estos valores ya que el usuario podría conectar / desconectar un teclado bluetooth en cualquier momento.

var element = document.getElementById("element"); // the input field
var focused = false;

var virtualKeyboardHeight = function () {
    var sx = document.body.scrollLeft, sy = document.body.scrollTop;
    var naturalHeight = window.innerHeight;
    window.scrollTo(sx, document.body.scrollHeight);
    var keyboardHeight = naturalHeight - window.innerHeight;
    window.scrollTo(sx, sy);
    return keyboardHeight;
};

element.onfocus = function () {
    focused = true;
    setTimeout(function() { 
        element.value = "keyboardHeight = " + virtualKeyboardHeight() 
    }, 1); // to allow for orientation scrolling
};

window.onresize = function () {
    if (focused) {
        element.value = "keyboardHeight = " + virtualKeyboardHeight();
    }
};

element.onblur = function () {
    focused = false;
};

Tenga en cuenta que cuando el usuario usa un teclado bluetooth, el teclado Height es 44, que es el alto de la barra de herramientas [anterior] [siguiente].

Hay un pequeño parpadeo cuando haces esta detección, pero no parece posible evitarla.




Solo probado en Android 4.1.1:

desenfoque evento no es un evento confiable para probar el teclado hacia arriba y hacia abajo porque el usuario como la opción de ocultar explícitamente el teclado que no desencadena un evento de desenfoque en el campo que hizo que el teclado se muestre.

Sin embargo, el cambio de tamaño del evento funciona como un amuleto si el teclado sube o baja por algún motivo.

café:

$(window).bind "resize", (event) ->  alert "resize"

dispara en cualquier momento que el teclado se muestra u oculta por alguna razón.

Sin embargo, tenga en cuenta que, en el caso de un navegador de Android (en lugar de una aplicación), hay una barra de URL retráctil que no dispara el cambio de tamaño cuando se retrae pero sí cambia el tamaño de la ventana disponible.




Esta solución recuerda la posición de desplazamiento

    var currentscroll = 0;

    $('input').bind('focus',function() {
        currentscroll = $(window).scrollTop();
    });

    $('input').bind('blur',function() {
        if(currentscroll != $(window).scrollTop()){

        $(window).scrollTop(currentscroll);

        }
    });



Hice algunas búsquedas, y no pude encontrar nada concreto para un "teclado mostrado" o "en el teclado descartado". Ver la lista oficial de eventos compatibles . Consulte también la Nota técnica TN2262 para iPad. Como probablemente ya sepa, hay un evento de onorientationchange cuerpo que puede cablear para detectar paisaje / retrato.

Del mismo modo, pero supongo ... ¿has intentado detectar el cambio de tamaño? Los cambios en la ventana gráfica pueden desencadenar ese evento indirectamente desde el teclado que se muestra / oculta.

window.addEventListener('resize', function() { alert(window.innerHeight); });

Lo cual simplemente alertaría la nueva altura en cualquier evento de cambio de tamaño ....




El problema es que, incluso en 2014, los dispositivos manejan eventos de cambio de tamaño de pantalla, así como eventos de desplazamiento, de manera incoherente mientras el teclado virtual está abierto.

Descubrí que, incluso si usa un teclado bluetooth, iOS, en particular, desencadena algunos extraños errores de diseño; así que en lugar de detectar un teclado suave, solo tuve que apuntar a dispositivos que son muy estrechos y tienen pantallas táctiles.

Uso las consultas de medios (o window.matchMedia ) para la detección de ancho y Modernizr para la detección de eventos táctiles.




Tal vez es más fácil tener una casilla de verificación en la configuración de su aplicación donde el usuario puede alternar '¿teclado externo conectado?'.

En letra pequeña, explique al usuario que los teclados externos actualmente no son detectables en los navegadores actuales.




Related

javascript iphone ipad safari web-applications