La détection du verrouillage des majuscules est une fonctionnalité utile dans de nombreux cas d'utilisation, que ce soit pour améliorer l'expérience utilisateur ou pour personnaliser le comportement d'une application. Dans cet article, nous allons voir comment détecter le verrouillage des majuscules en JavaScript.

Il est possible pour n'importe qui d'activer accidentellement la touche de verrouillage des majuscules à tout moment, sans même s'en rendre compte. En général, les utilisateurs peuvent détecter facilement le verrouillage des majuscules non désiré lorsqu'ils saisissent la plupart des entrées de texte. Cependant, lorsque l'utilisateur est en train de saisir un mot de passe dans un champ, ce problème peut passer inaperçu. Cela peut entraîner des erreurs de saisie de mot de passe, ce qui peut être frustrant pour l'utilisateur.
Dans l'idéal, les développeurs pourraient mettre en place une notification pour informer l'utilisateur lorsque sa touche de verrouillage des majuscules est activée.

Pour repérer si un utilisateur a activé le verrouillage des majuscules de son clavier, nous pouvons faire appel à la méthode KeyboardEvent de getModifierState().

L'une des méthodes les plus courantes pour détecter le verrouillage des majuscules consiste à écouter l'événement "keypress" et à vérifier si la touche relachée correspond à la majuscule. Si c'est le cas, cela indique probablement que le verrouillage des majuscules est activé :

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Avertir l'utilisateur qu'il a sa touche Maj activée
    }
});

La documentation W3C mentionne plusieurs éléments pour getModifierState() :

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

A vous de jouer ;)