Détecter et indiquer l'activation de la touche CapsLock avec jQuery

Devthought est l'un de mes blogs préférés du moment. J'adore ce genre de blog qui lance plein de petites idées et astuces sans s'enliser dans des articles de centaines de lignes (ce que j'aurai aimé pouvoir faire).

Dans l'un de ses derniers articles Guillermo Rauch, l'auteur de Devthought, propose un moyen de détecter l'activation de la touche CapsLock avec Mootools. C'est le genre d'astuces toutes bêtes auxquelles on ne pense pas forcement pour résoudre des problèmes nativement sans solution. En la transposant à jQuery, j'en ai profité pour en faire un plugin et d'y ajouter quelques options qui me semblent utiles sur les champs de mot de passe. A vous de voir.

Démonstration

Il est courant de se tromper dans la saisie de ses mots de passe à cause d'une touche Majuscule activée par mégarde. Comme le contenu du champs est masqué, on ne s'en rend pas compte tout de suite. Les mots de passe étant très souvent "case sensitive", les systèmes d'exploitation (Windows ou Mac OS) avertissent lorsqu'il détecte l'activation de cette touche pour éviter à l'utilisateur de perdre son temps. C'est cet effet que j'ai voulu retranscrire ici.

Passez en Majuscule par la touche CapsLock puis tapez quelques lettres dans l'un des champs suivant.

L'astuce

L'idée de départ est simple, si la touche CapsLock est activée, les caractères saisis seront en majuscules sauf si la touche Shift est enfoncée. C'est ce que teste ce bout de code :

if ((evt.which >= 65 && evt.which <= 90)  && !evt.shiftKey || 
    (evt.which >= 97 && evt.which <= 122) &&  evt.shiftKey) {
    // Code si la touche est activée
} else {
    // Code si elle ne l'est pas....
}

Sur un objet "événement", which renvoie le code ASCII du caractère saisi. Donc de 65 (A) à 90 (Z) pour les majuscules ou 97 (a) à 122 (z) pour les miniscules. evt.shiftKey vous l'aurez compris retourne l'état de la touche Shift.

Le plug-in jQuery

Pour ce qui est du plugin jQuery, je ne vais pas m'étendre sur sa conception. Il n'y a franchement rien de nouveau ni de compliqué ici.Pour plus d'informations référez-vous à cet article. Tous les points ont déjà été traités dans des articles précédents sur ce même blog.

Le plugin dans son intégralité

/**
 * Détection de touche CapsLock
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
jQuery.fn.caps = function(settings){
    var bubble;
    var caps = false;
    // Quelques paramètres du plugin configurables
    var options = {
        delay:     3000,
        classname: "caps-bubble",
        message:   "<b>Attention</b> : votre touche MAJUSCULE est activée."
    };
    $.extend(options, settings);
    
    // Fonction qui créé et affiche la bulle d'alerte
    function displayBubble(x, y) {
        if (!bubble) {
            bubble = $('<div class="'+ options.classname +'">'+ options.message +'</div>');
            bubble.css({ 
                position: 'absolute', 
                left:     x,
                top:      y
            }).appendTo($('body'));
            // Elle sera effacée au bout de quelques secondes
            setTimeout(removeBubble, options.delay);
        }
    }
    
    // Fonction qui supprime la bulle d'alerte
    function removeBubble() {
        if (bubble) {
            $(bubble).remove();
            bubble = false;
        }
    }
    
    // Lorsqu'une touche est pressée
    return this.keypress(function(evt) {
        var $$ = $(this);
        var x  = $$.offset().left;
        var y  = $$.offset().top;
        // On teste si des majuscules sont produites
        if ((evt.which >= 65 && evt.which <= 90)  && !evt.shiftKey 
         || (evt.which >= 97 && evt.which <= 122) &&  evt.shiftKey) {
            caps = true;
            // Si oui on affiche la bulle d'alerte
            displayBubble(x, y);
        } else {
            caps = false;
            // Si non on supprime la bulle d'alerte
            removeBubble();
        }
    // La bulle est également supprimée lorsque la touche CapsLock est pressée   
    }).keydown(function(evt) {
        if (evt.which == 20 && caps == true) {
            removeBubble();
        }
    // La bulle est également supprimée lorsque le champs est quitté
    }).blur(function(evt) {
        removeBubble();
    });
};

Je pense que tout est clair sans trop d'autres explications. Une bulle avec un texte est créée et affichée aux coordonnées du textfield lors qu'un caractère y est saisi en majuscule sans que la touche Shift ne soit pressée (donc CapsLock activée). Cette bulle sera supprimée lorsque ce test est négatif, b) lorsque le champs est quitté, c) au bout de quelques secondes.

La feuille de style et les images

Un peu de peinture pour embellir tout ça.

.caps-bubble,
.caps-bubble-bottom,
.caps-bubble-right {
    background:transparent url(bubble-bottom.png) no-repeat left center;
    color:#fff;
    font:11px "Trebuchet MS", Tahoma, sans-serif;
    height:35px;
    margin-top:2.4em;
    padding:25px 10px 0px 10px;
    text-align:center;
    width:310px;
}

.caps-bubble-right {
    background:transparent url(bubble-right.png) no-repeat left center;
    margin:-5px 0 0 165px;
    padding:18px 10px 0 10px;
}

J'ai fait rapidement deux versions de la bulle. Les voici :

Usage

Comme d'habitude, une inclusion de la feuille de style est requise dans la page :

<link rel="stylesheet" type="text/css" href="capslock/jquery.capslock.css" />

De même pour l'inclusion de la librairie jQuery et du plugin en question :

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="capslock/jquery.capslock.js">

On termine par l'appel du plugin qu'on applique à l'élément souhaité, ici un input de type password avec l'id #password :

<script type="text/javascript" >
$(function() {
    $('#password').caps();
});
</script>

Quelques options sont configurables, telles que le message à afficher, le délai d'affichage et la classe CSS à appliquer à la bulle (par défaut .caps-bulle)

<script type="text/javascript" >
$(function() {
    $('#password').caps({ 
        delay:5000, 
        message:"Un autre message d'alerte", 
        classname:'myclass' 
    });
});
</script>

Voilà, vous savez tout. La totalité du plugin est également à télécharger ci-dessous.

Télécharger le code