Des moyens simples pour détecter le verrouillage des majuscules dans votre application Web

Lorsque les utilisateurs saisissent des mots de passe ou d'autres informations sensibles dans une application Web, il est crucial de leur offrir la meilleure expérience possible. Un problème courant est l’activation accidentelle du verrouillage des majuscules, qui peut entraîner des tentatives de connexion infructueuses et la frustration des utilisateurs. Dans ce blog, nous explorerons des moyens simples de détecter le verrouillage des majuscules à l'aide de JavaScript pour améliorer la convivialité et la sécurité de votre application.

1. Utilisation des événements keydown et keyup

Une méthode simple pour détecter le verrouillage des majuscules consiste à écouter les événements keydown et keyup. En vérifiant l'état de event.getModifierState('CapsLock'), vous pouvez déterminer si le verrouillage des majuscules est actif.

Voici un exemple :

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        console.log('Caps Lock is ON');
        // Show a message to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the message
    }
});

2. Vérification de l'événement. Quelle valeur

Une autre façon de détecter le verrouillage des majuscules consiste à examiner la valeur de l'événement lors d'un événement d'appui sur une touche. Cette méthode consiste à comparer les valeurs ASCII des caractères minuscules et majuscules.

Exemple :

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        console.log('Caps Lock is ON');
        // Display warning to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the warning
    }
});

3. Combinaison des événements keydown, keyup et keypress

Pour une solution plus robuste, vous pouvez combiner les événements keydown, keyup et keypress pour couvrir tous les scénarios possibles, garantissant ainsi une détection précise du verrouillage des majuscules.

Exemple :

let isCapsLockOn = false;

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        isCapsLockOn = true;
        console.log('Caps Lock is ON');
    } else {
        isCapsLockOn = false;
        console.log('Caps Lock is OFF');
    }
});

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        if (!isCapsLockOn) {
            isCapsLockOn = true;
            console.log('Caps Lock is ON');
        }
    }
});

Exemple de code complet

Vous pouvez trouver l'exemple de code complet pour détecter le verrouillage des majuscules dans votre application Web ici sur GitHub Gist.

Si vous avez trouvé cet article utile, donnez-lui un cœur ❤️ et suivez-moi pour plus de trucs et astuces JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!