LBweb Łukasz Bącik

#frontendowe spojrzenie na tworzenie stron www

Komentarze: 0

Detekcja CapsLock w JS

Formularze na stronie internetowej czasem potrafią nieźle namieszać w danych od użytkownika. To za sprawą przypadkowo, lub nie, wciśniętego klawisza „caps lock”. Jak się przed tym zabezpieczyć?

Na początek kod HTML:

<input type="password" name="password" id="password" />
<div class="message"></div>

Obsługa klawisza „caps lock” w JavaScript:

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

To wszystko. Użytkownik zostanie poinformowany o włączonym klawiszu.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.