Détection du clavier virtuel et du clavier matériel

Question

Cela fait un moment que j'y pense, et je n'arrive pas à trouver un moyen d'y faire face. Existe-t-il un moyen de détecter si l'utilisateur utilise un clavier virtuel (logiciel) ou un clavier traditionnel (matériel) ?

La nouvelle Surface de Windows possède son propre clavier dans la housse, et pour Android / iPad, il existe une tonne de claviers Bluetooth différents.

Alors, est-ce que l'un d'entre vous a une idée à ce sujet ?
Je vise Android, IOS et Windows Tablet/Phone.

---

Motivation : (très subjectif)

Lors du développement d'applications web pour tablettes/smartphones, j'ai compris qu'il était plus facile - dans de nombreuses situations - d'utiliser un clavier JavaScript plutôt que le clavier logiciel du système d'exploitation.

Disons que vous voulez entrer un code PIN. Au lieu d'avoir un clavier remplissant la moitié de l'écran :

Clavier logiciel (OS) :

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

Clavier JavaScript :

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

Si vous avez besoin de gérer un grand nombre d'entrées, peut-être que vous voulez faire une superposition div avec les entrées et utiliser le clavier du logiciel :

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

Mais si l'utilisateur dispose de son propre clavier matériel, nous voulons que l'édition se fasse en ligne sur place.

---

J'ai cherché autour de SO et j'ai trouvé ce post : Application Web pour iPad : Détecter le clavier virtuel en utilisant JavaScript dans Safari ? ... mais il semble que cela ne fonctionne que sur IOS - pas sûr pour le navigateur.

Answer 1

Je pense que la meilleure approche serait de combiner les attributs de formulaire HTML5 avec un lien facultatif vers le clavier virtuel.

Les attributs de formulaire HTML5 peuvent être utilisés pour déclencher différents types de claviers. Par exemple, <input type="email"> , <input type="number"> y <input type="tel"> déclenchera les types de clavier appropriés sur iOS (je ne suis pas sûr pour Android/WinPho/autres, mais j'imagine que cela fait la même chose), permettant à l'utilisateur de saisir les données plus facilement.

Si vous le souhaitez, vous pouvez également proposer un bouton permettant de déclencher un pavé numérique personnalisé sous le champ de texte pour les anciens navigateurs mobiles non conformes à la norme HTML5. Ceux-ci afficheront les nouveaux champs HTML5 comme des champs de texte standard.

Vous pouvez utiliser le reniflage de navigateur pour détecter les navigateurs mobiles, mais n'oubliez pas que ceux-ci peuvent toujours prendre en charge des éléments tels que les claviers Bluetooth. Le reniflage présente en outre le problème suivant : il manquera certainement certains navigateurs et en détectera d'autres de manière incorrecte. Il ne faut donc pas s'y fier uniquement.

Answer 2

Je ne pense pas que remplacer le clavier par défaut à l'écran soit une bonne idée, et je recommanderais d'opter pour ce que Jani a suggéré - les claviers virtuels s'adaptent aussi.

Mais je suis sûr qu'il est possible de détecter la plupart des claviers avec la fonction resize événement jumelé à une attention particulière sur le terrain ou par le suivi window.innerHeight (ou un autre [a-z]*Hauteur) et comparer la valeur avant et après la mise au point du champ.

Il s'agit d'un cas étrange de détection de caractéristiques, qui nécessitera donc beaucoup d'expérimentation. Je ne le ferais pas si j'étais vous.

Answer 3

Il se peut qu'il ne détecte pas le clavier. Mais je voudrais essayer de détecter si l'utilisateur utilise un navigateur mobile. Puisque les appareils qui ont des claviers virtuels natifs fonctionnent presque unanimement sur des navigateurs mobiles.

Voici un joli petit script qui utilise jquery

S'ils ne sont pas mobiles, présentez votre champ de saisie standard.

S'ils sont mobiles, n'affichez pas le champ de saisie (ils n'auront donc pas le clavier virtuel), mais un champ ou une liste cachés qui sont mis à jour avec jquery lorsqu'ils cliquent sur les boutons de votre pavé numérique.

Answer 4

Je suis tombé sur une question plus récente l'autre jour et sur une excellente réponse qui pourrait vous aider à résoudre votre problème de clavier.

Délai d'attente au survol de jquery (touch)

Essentiellement, il utilise une fonction JQuery qui renvoie un booléen si elle a pu créer un événement tactile.

$(document).ready(function() {

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

    var touchPresent = hasTouch();
});

Answer 5

WURFL est un cadre côté serveur qui vous offre de nombreuses informations sur les capacités du périphérique demandeur. Avec wurfel en place, votre application sera en mesure de servir les différents dispositifs/groupes de dispositifs avec une sortie/mise en forme optimisée.

L'un des scénarios les plus simples serait de faire la distinction entre les ordinateurs de bureau, les tables et les smartphones.

La base de données (fichier xml) est mise à jour régulièrement et des API officielles sont disponibles pour java, php et .net.