javascript - ember - Detectar teclado virtual vs. teclado de hardware

jquery virtual keyboard

Question

He estado pensando en esto hace un tiempo, y no puedo encontrar la forma de enfrentarlo. ¿Hay alguna forma de detectar si el usuario usa un teclado virtual (software) o un teclado tradicional (hardware)?

El nuevo Windows Surface tiene su propio teclado en la portada, y para Android / iPad hay una tonelada de diferentes teclados bluetooth.

Entonces, ¿alguno de ustedes tiene alguna información al respecto?
Estoy buscando Android, IOS y Windows Tablet / Phone.

Motivación: (muy subjetivo)

Al desarrollar aplicaciones web para tabletas / teléfonos inteligentes, he llegado a la conclusión de que es más fácil, en muchas situaciones, utilizar un teclado JavaScript en lugar del teclado de software del sistema operativo.

Digamos que quieres ingresar un código PIN. En lugar de tener un teclado que llena la mitad de la pantalla:

Teclado de software (OS):

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

Teclado JavaScript

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

Si necesita manejar muchas entradas, tal vez quiera hacer un div superpuesto con las entradas y usar el teclado del software:

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                |
|----------------|

Pero si el usuario tiene su propio teclado de hardware, queremos que la edición en línea esté en su lugar.

He estado buscando SO y encontré esta publicación: iPad Web App: ¿Detecta el teclado virtual usando JavaScript en Safari? ... pero parece que solo funciona en iOS: no estoy seguro del navegador.

Answer 1

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

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án los tipos de teclado apropiados en iOS (no estoy seguro acerca de Android / WinPho / other, pero lo haría imagine que hace lo mismo), lo que le permite al usuario ingresar los datos más fácilmente.

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

Puede utilizar el rastreo del navegador para detectar navegadores móviles, pero no olvide que aún pueden admitir elementos como los teclados bluetooth. Sniffing también tiene el problema de que casi seguro pasará por alto algunos navegadores y detectará otros incorrectamente, por lo que no deberías confiar únicamente en él.

Answer 2

Puede que no esté detectando el teclado. Pero trataría de 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 navegadores móviles.

Aquí hay un pequeño script que usa jquery

Si no son móviles, presente su campo de entrada estándar.

Si son móviles, no muestren el campo de entrada (para que no obtengan el teclado virtual), sino un campo oculto o una lista que se actualice con jquery cuando hagan clic en los botones de su teclado.

Answer 3

No creo que sobreescribir el teclado predeterminado en pantalla sea una buena idea, y recomendaría ir con lo que Jani sugirió: los teclados virtuales también se adaptan.

Pero estoy seguro de que es posible detectar la mayoría de los teclados con el evento window.innerHeight emparejado con foco en el campo o monitoreando window.innerHeight (o algún otro [az] * Height) y comparando el valor antes y después del enfoque de campo.

Este es un caso extraño de detección de características, por lo que necesitará mucha experimentación. No lo haría si fuera tú.

Answer 4

WURFL es un marco de servidor que le 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 sencillos sería la distinción entre escritorios, mesas y teléfonos inteligentes.

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

Answer 5

El otro día me encontré con una pregunta más reciente y una gran respuesta que puede ser útil para tu problema con el teclado.

Tiempo de espera en jquery hover (toque)

Básicamente, utiliza una función JQuery que devuelve un valor 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();
});

Answer 6

La solución de mayor beneficio 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 tenga unidades de altura vh (altura de la ventana gráfica)

Luego, en cualquier cambio de desenfoque / enfoque de una entrada / área de texto, compruebe si ese div ahora tiene una altura de 30% menos (en píxeles) de lo que solía tener antes de ese desenfoque / evento de 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);
});