Einfache Möglichkeiten, die Feststelltaste in Ihrer Web-App zu erkennen

Wenn Benutzer Passwörter oder andere vertrauliche Informationen in eine Webanwendung eingeben, ist es entscheidend, ihnen das bestmögliche Erlebnis zu bieten. Ein häufiges Problem ist die versehentliche Aktivierung der Feststelltaste, was zu fehlgeschlagenen Anmeldeversuchen und Frustration der Benutzer führen kann. In diesem Blog erkunden wir einfache Möglichkeiten, die Feststelltaste mithilfe von JavaScript zu erkennen, um die Benutzerfreundlichkeit und Sicherheit Ihrer Anwendung zu verbessern.

1. Verwenden der Keydown- und Keyup-Ereignisse

Eine einfache Methode, die Feststelltaste zu erkennen, besteht darin, die Keydown- und Keyup-Ereignisse abzuhören. Durch Überprüfen des Status von event.getModifierState('CapsLock') können Sie feststellen, ob die Feststelltaste aktiv ist.

Hier ist ein Beispiel:

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. Überprüfen des event.which-Werts

Eine weitere Möglichkeit, die Feststelltaste zu erkennen, besteht darin, den event.which-Wert während eines Tastendruckereignisses zu untersuchen. Bei dieser Methode werden die ASCII-Werte von Klein- und Großbuchstaben verglichen.

Beispiel:

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. Kombinieren von Keydown-, Keyup- und Keypress-Ereignissen

Für eine robustere Lösung können Sie die Ereignisse „Taste drücken“, „Taste drücken“ und „Taste drücken“ kombinieren, um alle möglichen Szenarien abzudecken und so eine genaue Erkennung der Feststelltaste sicherzustellen.

Beispiel:

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');
        }
    }
});

Vollständiger Beispielcode

Den vollständigen Beispielcode zum Erkennen der Feststelltaste in Ihrer Web-App finden Sie hier auf GitHub Gist.

Wenn Sie diesen Artikel hilfreich fanden, geben Sie ihm bitte ein Herz ❤️ und folgen Sie mir für weitere JavaScript-Tricks und -Tipps!

Das obige ist der detaillierte Inhalt vonEinfache Möglichkeiten, die Feststelltaste in Ihrer Web-App zu erkennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!