Pregunta Detectar teclado virtual vs. teclado de hardware


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 una superposición div con las entradas y use 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: Aplicación web iPad: ¿Detecta el teclado virtual usando JavaScript en Safari? ... pero parece que solo funciona en iOS: no estoy seguro del navegador.


32
2017-11-07 13:19


origen


Respuestas:


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 resize evento emparejado con enfoque en el campo o mediante monitoreo window.innerHeight (o alguna otra [a-z] * Altura) y comparar 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ú.


7
2017-11-15 21:48



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á los tipos de teclado apropiados en iOS (no estoy seguro acerca de Android / WinPho / other, 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 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.


19
2017-11-12 08:02



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.


1
2017-11-12 01:07



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.


1
2017-11-18 11:42



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();
});

1
2017-11-17 11:56



La solución de mayor beneficio que funciona en Chrome / Safari, etc., y en Android e iOS a partir del 20-nov-2017 será detectar un cambio en la altura de un div eso tiene un vh unidades de altura (altura de la ventana gráfica)

Luego, en cualquier desenfoque / cambio de enfoque de una entrada / área de texto, compruebe si 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);
});

0
2017-11-20 16:20