Rilevare Caps Lock Attivo con JavaScript

Programmare software e pagine web destinate all’uso di altri utenti, mette uno sviluppatore davanti ad una particolare condizione in cui deve necessariamente prevedere l’uso (corretto o scorretto) che essi ne faranno.

Un programmatore deve letteralmente prevedere cosa gli utenti faranno con l’applicazione che andrà a sviluppare, e non sono ammessi errori né dimenticanze, che possono portare anche a seri problemi (nei casi più estremi).

Per capire meglio prendiamo un esempio banale ma efficace: l’immissione di una password. Quante volte hai interagito con moduli in cui era richiesta l’immissione di caratteri speciali, maiuscole, minuscole e numeri? Tante scommetto, ed ormai è uno standard trovare form di questo genere, tanto che abbiamo anche sviluppato l’apposita funzione di controllo password con JavaScript come quella che trovi nella maggior parte delle pagine di iscrizione.

Anche il controllo del Caps Lock attivo è una feature presente in programmi per PC; nello stesso accesso a Windows viene rilevato l’uso del Caps Lock all’immissione della password.

Il rilevamento del tasto “blocco maiuscole” attivo è difficile però da trovare nei siti web. Questo per motivi funzionali e pratici, derivati dall’uso principale dei dispositivi mobili per la navigazione web e all’adattamento responsivo delle pagine web, che e hanno difficoltà ad interpretare l’uso di una funzione di questo genere sui dispositivi mobili.

Tuttavia può essere utile capire e integrare la funzione di rilevamento Caps Lock attivo per utenti desktop, che usano più spesso questo tasto o è più probabile trovarlo attivo. Se sei uno sviluppatore JavaScript e sei interessato ad integrare questa feature nel tuo sito, continua la lettura e consulta il codice in basso.

Rilevamento del Caps Lock attivo con JavaScript.

Il Caps Lock, o “bloc maiusc” in italiano, è un tasto con un comportamento particolare, che si differenzia dagli altri poiché alla sua pressione viene attivata la relativa funzione di blocco. Rilevare un comportamento di tale tipo in JavaScript è differente che rilevare la semplice pressione di un tasto, questo perché il controllo da parte del software deve essere eseguito anche quando non avviene la pressione di un pulsante, ma già dal semplice click sull’area di testo predisposta alla scrittura.

Se sei abituato alla cattura di un evento keypress o keyup, qui il discorso di fa leggermente più complesso, ma segue la medesima logica.

Per rilevare il tasto Caps Lock attivo con JavaScript bisogna utilizzare il seguente codice:

<input id="area" placeholder="Scrivi qualcosa in maiuscolo">

<script>
  var area = document.getElementById("area");
  area.addEventListener("keyup", function(event) {
    if (event.getModifierState("CapsLock")) {
      // CAPS LOCK ATTIVO
      alert("Caps lock attivo");
    }
  });
</script>

Come puoi vedere per ottenere il risultato desiderato abbiamo dovuto tirare in ballo il metodo getModifierState(), che permette proprio di rilevare se determinati pulsanti (keys) sono attivi (es. CapsLock, Alt, ScrollLock, NumLock, Shift, Control etc…).

Si può migliorare il codice ed integrare il tutto in una funzione dedicata in questo modo:

<input id="area" onkeyup="CheckCapsLock(event)" onclick="CheckCapsLock(event)" placeholder="Scrivi qualcosa in maiuscolo">
<span id="msg" style="display:none;">CAPS LOCK ATTIVO</span>

<script> 
  function CheckCapsLock(event){
    if (event.getModifierState("CapsLock")) {
      // CAPS LOCK ATTIVO
      document.getElementById("msg").style.display = "block";
    } else {
      document.getElementById("msg").style.display = "none";

    }
  }
</script>

Puoi testare il codice interattivo e modificarlo in codewith.it.

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle