Detectar el teclado virtual vs teclado de hardware

Creo que el mejor enfoque sería combinar atributos de formulario HTML5 con un enlace opcional de teclado virtual.

Los atributos de formulario HTML5 se pueden usar para activar diferentes tipos de teclados. Por ejemplo, <input type="email">, <input type="number"> y <input type="tel"> activará los tipos de teclado apropiados en iOS (no estoy seguro sobre Android/WinPho/otros, pero me imagino que hace lo mismo), lo que permite al usuario ingresar los datos más fácilmente.

Si lo desea, también puede ofrecer un botón para activar una costumbre teclado numérico en el campo de texto para navegadores móviles antiguos que no cumplen con HTML5. Estos mostrarán los nuevos campos HTML5 como campos de texto estándar.

Puede usar el sniffing del navegador para detectar navegadores móviles, pero no olvide que todavía pueden soportar cosas como teclados bluetooth. Olfatear, además, tiene el problema de que es casi seguro que se pierda algunos navegadores, y detectar incorrectamente otros, por lo que no debe confiar en él únicamente.

Puede que no esté detectando el teclado. Pero intentaría detectar si el usuario está en un navegador móvil. Dado que los dispositivos que tienen teclados virtuales nativos se ejecutan casi unánimemente en los navegadores móviles.

Aquí hay un pequeño script que utiliza jquery

Si no son móviles, presenta tu campo de entrada estándar.

Si son móviles no muestran el campo de entrada (por lo que no obtienen el teclado virtual), en su lugar tienen un campo oculto o una lista que se actualiza con jquery cuando hacen clic en los botones de su pinpad.

WURFL es un framework de servidor que te ofrece mucha información sobre las capacidades del dispositivo solicitante. Con wurfel en su lugar, su aplicación podrá servir a los diversos dispositivos / grupos de dispositivos con salida/marcado optimizado.

Uno de los escenarios más simples sería distiguish entre escritorios, mesas y teléfonos inteligentes.

La base de datos (archivo xml) se actualiza regularmente y las api oficiales están disponibles para java, php y. net

Me encontré con una nueva pregunta el otro día y una gran respuesta que puede ayudar con su problema de teclado.

Tiempo de espera en jquery hover (touch)

Esencialmente utiliza una función jQuery que devuelve un booleano si fue capaz de crear un evento táctil.

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return true;
        } catch (e) {
           return false;
        }    
    }

    var touchPresent = hasTouch();
});

La solución más bullet prof que funciona en Chrome / Safari, etc.. y tanto en Android como en iOS a partir del 20-nov-2017 será detectar un cambio en la altura de un div que tiene un vh unidades de altura (altura de la ventana)

Luego, en cualquier cambio de desenfoque/enfoque de un área de entrada/texto, verifique si ese div ahora tiene una altura de 30% menos (en píxeles) de la que solía tener antes de ese evento de desenfoque/enfoque.

CSS:

#height-div{height: 10vh;}

JQuery:

$(document).ready(function() {
    var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons 
}

Ahora, aquí está la magia:

$("input, textarea").focus(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

$("input, textarea").blur(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});