JavaScript: verificare se blocco maiuscole è attivo

In questo articolo vedremo come verificare se il blocco maiuscole è attivo con JavaScript.

Per verificare se il blocco maiuscole è attivo, utilizziamo il metodo getModifierState() dell'oggetto KeyboardEvent:

const capslockIsOn = event.getModifierState(modifier);

Il metodo getModifierState() restituisce true se un modificatore è attivo; in caso contrario, restituisce false.

Event.getModifierState('CapsLock') può essere utilizzato per rilevare se il blocco maiuscole è attivo.

const password = document.querySelector('#password');
const message = document.querySelector('.message');

password.addEventListener('keyup', function (e) {
    if (e.getModifierState('CapsLock')) {
        message.textContent = 'Blocco maiuscole è attivo.';
    } else {
        message.textContent = '';
    }
});