Pour ceux d'entre nous qui voyagent souvent, nous finissons souvent par accéder à nos courriels et à d'autres comptes Web confidentiels sur des ordinateurs publics. Dans de telles circonstances, nous sommes complètement à la merci des enregistreurs de frappe et autres logiciels malveillants qui suivent nos frappes au clavier et enregistrent nos mots de passe.
Pourtant, très peu de sites Web offrent aux utilisateurs la possibilité d’utiliser un clavier virtuel pour saisir (au minimum) leurs mots de passe. Oui, quelques banques le font, mais vu la quantité d'informations personnelles que nous stockons dans diverses applications Web de nos jours, la sécurité de ces comptes n'a pas moins d'importance pour nous. Ce tutoriel expliquera comment mettre en œuvre un simple clavier virtuel avec l'aide de jQuery.
Avant de commencer, laissez-moi vous montrer comment tout cela se présentera à la fin.
Configuration HTML et CSS de base
Ok, commençons. Nous commençons par un simple formulaire de connexion ancien avec des champs nom d'utilisateur et mot de passe et un bouton de connexion. Nous ajoutons un lien qui affichera / cachera le clavier virtuel lorsque vous cliquerez dessus.
Remarque: à des fins de démonstration, j'ai en fait utilisé un champ de texte normal au lieu d'un champ de texte de type mot de passe!
Ensuite, il est temps de mettre en place le XHTML pour le clavier en place. Je voulais juste adopter une approche très simple, et donc exclu de générer les clés de manière dynamique. Je n'ai que les quatre lignes principales du clavier standard (chacune enfermée dans une DIV), ainsi que leurs équivalents de décalage. Cela signifie donc un total de 8 lignes, dont à tout moment (selon que la touche majuscule est enfoncée ou non), quatre des lignes seraient visibles et les quatre autres masquées.
J'ai pris soin de représenter des caractères ayant une signification spéciale en HTML, comme? <? en utilisant des entités.
Le CSS
J'ai gardé le style CSS très minime. Bien sûr, si vous voulez que votre clavier ressemble à un dragon, vous pouvez continuer et tout ce jazz! Nous définissons la propriété display de div qui entoure le clavier pour être? Aucune? initialement, comme nous ne voulons pas qu'il apparaisse jusqu'à ce que l'utilisateur l'active en cliquant sur le bouton? Clavier? lien. De plus, nous cachons aussi le décalage? touches, c’est-à-dire les touches qui ne sont activées que lorsque le bouton de changement de vitesse est enfoncé. J'ai nommé ces lignes avec un identifiant div se terminant par "_shift". Nous les rappellerons lorsque l'utilisateur appuiera sur la touche Maj (nous verrons plus tard).
Le reste du CSS implique un formatage de base pour que les touches ressemblent à celles d'un clavier QWERTY standard.
jQuery
Passons maintenant à la partie la plus importante - le JavaScript qui contrôle le comportement du clavier. Nous utiliserons deux extensions jQuery: l’une pour rendre le clavier déplaçable et l’autre pour faciliter la sélection et la manipulation du champ du mot de passe. J'ai apporté quelques ajouts au plugin fieldSelection JQuery original d'Alex Brem pour répondre à nos besoins supplémentaires. vkeyboard.js contient notre code personnalisé.
Dans vkeyboard.js, nous plaçons tout notre code dans la fonction ready de jQuery afin de nous assurer qu'il ne s'exécute qu'après le chargement complet du document.
Permettez-moi de vous expliquer la logique sous-jacente au code. Nous ajoutons d'abord un? Onclick? gestionnaire d’événements qui fait basculer le clavier (c.-à-d., s’il est masqué, masqué si déjà affiché) lorsque l’utilisateur clique sur le bouton? Clavier? lien.
Ensuite, nous rendons le clavier déplaçable, de sorte que l'utilisateur puisse le faire glisser et le conserver n'importe où sur l'écran de manière à ne pas obstruer le texte situé en dessous. Pour ce faire, nous appelons draggable (), gracieuseté de jQuery UI + draggable plugin.
Nous devons ensuite définir une fonction qui bascule entre les lignes par défaut du clavier et celles qui sont activées lorsque le? Shift? la touche est enfoncée.
Enfin, nous définissons une fonction appelée à chaque pression sur une des touches du clavier.
Cette fonction vérifie si la touche appuyée est Backspace. Si tel est le cas, il appelle alors la fonction replaceSelection à partir du plug-in fieldSelection avec une chaîne vide en tant que paramètre, pour indiquer qu'une opération de retour arrière (le remplacement du caractère précédent par l'emplacement du curseur actuel par une chaîne vide - c'est-à-dire la suppression du caractère précédent) doit être effectué.
Si le? Shift? la touche avait été pressée, alors la fonction définit le? shifton? La variable doit être vraie pour indiquer que la touche Maj a été enfoncée et appelle onShift (1).Toutefois, si vous avez déjà appuyé sur la touche Maj, la fonction désactive les lignes de décalage en appelant onShift (0).
Si une autre touche a été enfoncée, nous insérons simplement le caractère entre la position actuelle du curseur. ReplaceSelection () gère le cas où certains caractères ont déjà été sélectionnés par l'utilisateur. Dans ce cas, les caractères sélectionnés seraient remplacés par le caractère représenté par la touche enfoncée.
Et? nous avons fini! Consultez la démo et téléchargez le code source complet ici.
Comme vous pouvez le constater, le gros du travail est géré par les plugins jQuery. Si vous souhaitez en savoir plus sur les défis liés à la sélection et au remplacement de champs à l'aide de Javascript, consultez cet article sur Quirksmode.