web-dev-qa-db-fra.com

Détecter le clavier virtuel contre le clavier matériel

J'y réfléchis depuis un moment maintenant, 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)?

Le nouveau Windows Surface a son propre clavier dans la couverture, et pour Android/iPad, il existe une tonne de claviers Bluetooth différents.

Alors, est-ce que vous avez quelque chose à dire à ce sujet?
Je vise Android, IOS et tablette/téléphone Windows.

Motivation: (très subjective)

Lors du développement d'applications Web pour tablette/smartphone, j'ai compris qu'il est plus facile - dans de nombreuses situations - d'utiliser un clavier JavaScript au lieu du 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 devez gérer un grand nombre d'entrées, vous pouvez peut-être faire une superposition div avec les entrées et utiliser le clavier logiciel:

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

Mais si l'utilisateur a son propre clavier matériel, nous voulons mettre en place l'édition en ligne.

J'ai regardé autour de moi SO et j'ai trouvé cet article: iPad Web App: Détecter le clavier virtuel en utilisant JavaScript dans Safari? ... mais cela semble fonctionner uniquement en = IOS - pas sûr du navigateur.

javascriptjquerykeyboardvirtualtablet
34
andlrc

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

Mais je suis sûr qu'il est possible de détecter la plupart des claviers avec l'événement resize associé à un focus sur le terrain ou en surveillant window.innerHeight (ou un autre [a-z] * Hauteur) et en comparant la valeur avant et après le focus de champ.

Il s'agit d'un cas étrange de détection de fonctionnalités, il faudra donc beaucoup d'expérimentation. Je ne le ferais pas si j'étais toi.

8
naugtur

Je pense que la meilleure approche serait de combiner les attributs du formulaire HTML5 avec un lien clavier virtuel en option.

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"> et <input type="tel"> déclenchera les types de clavier appropriés sur iOS (je ne suis pas sûr d'Android/WinPho/autre, mais j'imagine que cela fait la même chose), permettant à l'utilisateur d'entrer les données plus facilement.

Si vous le souhaitez, vous pouvez également proposer un bouton pour déclencher un pavé numérique personnalisé sous le champ de texte pour les anciens navigateurs mobiles non compatibles HTML5. Ceux-ci afficheront les nouveaux champs HTML5 en tant que champs de texte standard.

Vous pouvez utiliser le reniflement de navigateur pour détecter les navigateurs mobiles, mais n'oubliez pas qu'ils peuvent toujours prendre en charge des éléments tels que les claviers Bluetooth. Renifler a en outre le problème qu'il manquera certainement certains navigateurs et en détectera d'autres incorrectement, vous ne devriez donc pas vous fier uniquement à cela.

21
Jani Hartikainen

La solution de prof de balle qui fonctionne le plus sur Chrome/Safari etc. et sur les deux Android et iOS à partir du 20 novembre 2017 sera de détecter un changement de la hauteur d'un div qui a vh unités de hauteur (hauteur de la fenêtre d'affichage)

Ensuite, lors de tout changement de flou/mise au point d'une entrée/zone de texte, vérifiez si cette div a maintenant une hauteur de 30% de moins (en pixels) qu'elle ne l'était avant cet événement de flou/mise au point.

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 
}

Maintenant, voici la magie:

$("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);
});
3
TBE

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

Time out sur jquery hover (touch)

Il utilise essentiellement une fonction JQuery qui renvoie un booléen s'il 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();
});
1
Malkus

WURFL est un framework côté serveur qui vous offre beaucoup d'informations sur les capacités de l'appareil demandeur. Avec wurfel en place, votre application pourra servir les différents appareils/groupes d'appareils avec une sortie/balisage optimisé.

L'un des scénarios les plus simples serait de distinguer 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

1
Lukas Winzenried

Il ne détecte peut-être pas le clavier. Mais j'essaierais de détecter si l'utilisateur est sur un navigateur mobile. Depuis les appareils qui ont des claviers virtuels natifs fonctionnent presque à l'unanimité sur les 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 (afin qu'ils n'obtiennent pas le clavier virtuel), mais plutôt un champ ou une liste masqué qui est mis à jour avec jquery lorsqu'ils cliquent sur les boutons de votre clavier.

1
Malkus