Para verificar se o caps lock está ativado, você usa o getModifierState()
método do KeyboardEvent
objeto:
const capslockIsOn = event.getModifierState(modifier);
Linguagem de código: JavaScript ( javascript )
O getModifierState()
método retorna true
se a modifier
estiver ativo; caso contrário, ele retorna false
.
O event.getModifierState('CapsLock')
pode ser usado para detectar se o caps lock está ativado.
Suponha que você tenha um campo de senha como este:
<input type="password" name="password" id="password" placeholder="Enter a password">
<div class="message"></div>
Linguagem de código: HTML, XML ( xml )
O seguinte mostra uma mensagem de aviso se você ativar o caps lock e digitar a senha:
const password = document.querySelector('#password');
const message = document.querySelector('.message');
password.addEventListener('keyup', function (e) {
if (e.getModifierState('CapsLock')) {
message.textContent = 'Caps lock is on';
} else {
message.textContent = '';
}
});
Linguagem de código: JavaScript ( javascript )
Demonstração: