Come si fa a sapere se il blocco maiuscole è attivo utilizzando JavaScript?

Come si fa a sapere se il blocco maiuscole è attivo utilizzando JavaScript?

Un avvertimento però: l'ho fatto su Google e la migliore soluzione che ho trovato è stata quella di allegare un onkeypressevento a ogni input, quindi controllare ogni volta se la lettera premuta era maiuscola e, se lo era, quindi verificare se anche il turno fosse tenuto premuto. In caso contrario, è necessario attivare il blocco maiuscole. Sembra davvero sporco e solo ... dispendioso - sicuramente c'è un modo migliore di questo?

Puoi provarlo .. Aggiunto un esempio funzionante. Quando il focus è sull'input, l'attivazione del bloc maiusc fa diventare rosso il led altrimenti verde. (Non testato su Mac / Linux)

NOTA: entrambe le versioni funzionano per me. Grazie per input costruttivi nei commenti.

VECCHIA VERSIONE: https://jsbin.com/mahenes/edit?js,output

Inoltre, ecco una versione modificata (qualcuno può testare su Mac e confermare)

NUOVA VERSIONE: https://jsbin.com/xiconuv/edit?js,output

NUOVA VERSIONE:

function isCapslock(e){
    const IS_MAC = /Mac/.test(navigator.platform);

    const charCode      = e.charCode;
    const shiftKey      = e.shiftKey;

    if (charCode >= 97 && charCode <= 122){
      capsLock = shiftKey;
    } else if (charCode >= 65 && charCode <= 90 
               && !(shiftKey && IS_MAC)){
      capsLock = !shiftKey;
    }

    return capsLock;
}

VECCHIA VERSIONE:

funzione isCapslock (e) {

e = (e) ? e : window.event;

var charCode = false;
if (e.which) {
    charCode = e.which;
} else if (e.keyCode) {
    charCode = e.keyCode;
}

var shifton = false;
if (e.shiftKey) {
    shifton = e.shiftKey;
} else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
}

if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
}

if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
}

return false;

}

Per i caratteri internazionali, è possibile aggiungere un controllo aggiuntivo per le seguenti chiavi, se necessario. Devi ottenere l'intervallo di codici chiave per i caratteri che ti interessano, ad esempio utilizzando un array di keymapping che conterrà tutte le chiavi valide del caso d'uso che stai indirizzando ...

AZ maiuscola o 'Ä', 'Ö', 'Ü', aZ minuscola o 0-9 o 'ä', 'ö', 'ü'

Le chiavi sopra sono solo una rappresentazione di esempio.

In jQuery,

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

È necessario evitare l'errore, come il tasto backspace s.toLowerCase() !== s.

Puoi usare a KeyboardEvent per rilevare numerosi tasti incluso il blocco maiuscole sui browser più recenti.

La getModifierStatefunzione fornirà lo stato per:

• alt
• AltGraph
• Blocco maiuscole
• Controllo
• Fn (Android)
• Meta
• NumLock
• Sistema operativo (Windows e Linux)
• Blocco scorrimento
• Cambio

Questa demo funziona su tutti i principali browser incluso mobile ( caniuse ).

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

È possibile rilevare il blocco maiuscole utilizzando "è la lettera maiuscola e non viene premuto maiuscole" utilizzando un'acquisizione della pressione del tasto sul documento. Ma allora è meglio essere sicuri che nessun altro gestore dei tasti prema il fumetto dell'evento prima che arrivi al gestore sul documento.

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

Puoi catturare l'evento durante la fase di acquisizione nei browser che lo supportano, ma sembra in qualche modo inutile in quanto non funzionerà su tutti i browser.

Non riesco a pensare a nessun altro modo di rilevare effettivamente lo stato del blocco maiuscole. Il controllo è comunque semplice e se sono stati digitati caratteri non rilevabili, beh ... non era necessario rilevare.

C'è stato un articolo su 24 modi in questo ultimo anno. Abbastanza buono, ma manca il supporto del personaggio internazionale (usare toUpperCase()per aggirare quello).

Molte risposte esistenti verificheranno il blocco maiuscole quando non si preme il tasto MAIUSC ma non lo controlleranno se si preme MAIUSC e si diventa minuscole, o lo verificheranno, ma non controllerà anche che il blocco maiuscole sia disattivato o verificherà che, ma considererà le chiavi non alfa come "off". Ecco una soluzione jQuery adattata che mostrerà un avviso se un tasto alfa viene premuto con maiuscole (maiusc o no shift), disattiverà l'avviso se un tasto alfa viene premuto senza maiuscole, ma non spegnerà o accenderà l'avviso quando vengono premuti numeri o altri tasti.

$("#password").keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
  });

In JQuery. Questo riguarda la gestione degli eventi in Firefox e verificherà la presenza di caratteri maiuscoli e minuscoli inattesi. Ciò presuppone un <input id="password" type="password" name="whatever"/>elemento e un elemento separato con id ' capsLockWarning' che ha l'avvertimento che vogliamo mostrare (ma è nascosto altrimenti).

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});

Le risposte migliori qui non hanno funzionato per me per un paio di ragioni (codice non commentato con un link non funzionante e una soluzione incompleta). Quindi ho trascorso alcune ore a provare tutti fuori e ottenere il meglio che potevo: ecco il mio, tra cui jQuery e non jQuery.

jQuery

Si noti che jQuery normalizza l'oggetto evento, quindi mancano alcuni controlli. L'ho anche ristretto a tutti i campi password (poiché questo è il motivo principale per cui è necessario) e ho aggiunto un messaggio di avviso. Questo è stato testato in Chrome, Mozilla, Opera e IE6-8. Stabile e intercetta tutti gli stati di maiuscolo SALVO quando vengono premuti numeri o spazi.

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

Senza jQuery

Alcune delle altre soluzioni senza jQuery mancavano di fallback IE. @Zappa l'ha corretto.

document.onkeypress = function ( e ) {
    e = (e) ? e : window.event;

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

Nota: Scopri le soluzioni di @Borgar, @Joe Liversedge e @Zappa e il plug-in sviluppato da @Pavel Azanov, che non ho provato ma è una buona idea. Se qualcuno conosce un modo per espandere l'ambito oltre A-Za-z, modifica via. Inoltre, le versioni jQuery di questa domanda sono chiuse come duplicate, quindi è per questo che sto postando entrambe qui.

Noi usiamo getModifierState per controllare il maiuscolo, è solo un membro di un evento mouse o tastiera, quindi non possiamo usare un onfocus. I due modi più comuni in cui il campo della password si focalizzeranno è con un clic in o una scheda. Usiamo onclickper verificare la presenza di un clic del mouse all'interno dell'input e utilizziamo onkeyupper rilevare una scheda dal campo di input precedente. Se il campo password è l'unico campo della pagina ed è auto-focalizzato, l'evento non si verificherà fino a quando non viene rilasciato il primo tasto, il che è ok ma non è l'ideale, vuoi davvero visualizzare i suggerimenti dello strumento Blocco maiuscole una volta ottenuto il campo password attenzione, ma nella maggior parte dei casi questa soluzione funziona come un fascino.

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq

So che questo è un vecchio argomento, ma ho pensato che mi sarei dato da mangiare nel caso aiutasse gli altri. Nessuna delle risposte alla domanda sembra funzionare in IE8. Tuttavia, ho trovato questo codice che funziona in IE8. (Non ho ancora testato nulla al di sotto di IE8). Questo può essere facilmente modificato per jQuery, se necessario.

function capsCheck(e,obj){ 
    kc = e.keyCode?e.keyCode:e.which;  
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);  
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
        document.getElementById('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

E la funzione viene chiamata attraverso l'evento onkeypress in questo modo:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

Questa è una soluzione che, oltre a controllare lo stato durante la scrittura, attiva e disattiva il messaggio di avviso ogni volta che Caps Locksi preme il tasto (con alcune limitazioni).

Supporta anche lettere non inglesi al di fuori dell'intervallo AZ, in quanto controlla il carattere di stringa rispetto toUpperCase()e toLowerCase()invece di verificare l'intervallo di caratteri.

$(function(){
  //Initialize to hide caps-lock-warning
  $('.caps-lock-warning').hide();

  //Sniff for Caps-Lock state
  $("#password").keypress(function(e) {
    var s = String.fromCharCode( e.which );
    if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
       (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
      this.caps = true; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').show();
    } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
              (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
      this.caps = false; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').hide();
    }//else else do nothing if not a letter we can use to differentiate
  });

  //Toggle warning message on Caps-Lock toggle (with some limitation)
  $(document).keydown(function(e){
    if(e.which==20){ // Caps-Lock keypress
      var pass = document.getElementById("password");
      if(typeof(pass.caps) === 'boolean'){
        //State has been set to a known value by keypress
        pass.caps = !pass.caps;
        $(pass).next('.caps-lock-warning').toggle(pass.caps);
      }
    }
  });

  //Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

Si noti che osservare l'attivazione / disattivazione del blocco maiuscole è utile solo se si conosce lo stato del blocco maiuscole prima di Caps Lockpremere il tasto. Lo stato di blocco maiuscole corrente viene mantenuto con una capsproprietà JavaScript sull'elemento password. Viene impostato la prima volta che viene convalidata la condizione di blocco maiuscole quando l'utente preme una lettera che può essere maiuscola o minuscola. Se la finestra perde lo stato attivo, non possiamo più osservare l'attivazione / disattivazione del blocco maiuscole, quindi è necessario ripristinare uno stato sconosciuto.

Di recente c'è stata una domanda simile su hashcode.com e ho creato un plugin jQuery per gestirlo. Supporta anche il riconoscimento del blocco maiuscole sui numeri. (Sul layout di tastiera tedesco standard il blocco maiuscole ha effetto sui numeri).

Puoi controllare l'ultima versione qui: jquery.capsChecker

Per jQuery con Twitter Bootstrap

Controllare i tappi bloccati per i seguenti caratteri:

AZ maiuscola o 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

aZ minuscola o 0-9 o 'ä', 'ö', 'ü', '.', ',', '+', '#'

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
    var kc = e.which; // get keycode

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

demo live su jsfiddle

Una variabile che mostra lo stato di blocco maiuscole:

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

funziona su tutti i browser => canIUse

Questa risposta basata su jQuery pubblicata da @ user110902 mi è stata utile. Tuttavia, l'ho migliorato un po 'per evitare un difetto menzionato nel commento di @B_N: non è riuscito a rilevare CapsLock mentre si preme Maiusc:

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
    ||  ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
        alert('caps is on');
    }
});

In questo modo, funzionerà anche premendo Shift.

Questo codice rileva il blocco maiuscole, indipendentemente dal caso o se viene premuto il tasto Maiusc:

$('#password').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( (s.toUpperCase() === s && !e.shiftKey) || 
             (s.toLowerCase() === s && e.shiftKey) ) {
        alert('caps is on');
    }
});

Ho scritto una libreria chiamata capsLock che fa esattamente quello che vuoi che faccia.

Includilo nelle tue pagine Web:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Quindi usalo come segue:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

Guarda la demo: http://jsfiddle.net/3EXMd/

Lo stato viene aggiornato quando si preme il tasto BLOC MAIUSC. Utilizza solo l'hack del tasto Maiusc per determinare lo stato corretto del tasto BLOC MAIUSC. Inizialmente lo stato è false. Quindi attenzione.

Ancora un'altra versione, chiara e semplice, gestisce maiusc Maiusc e non vincolato ad ascii Penso:

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

Modifica: senso di capsLockOn è stato invertito, doh, risolto.

Modifica n. 2: dopo aver verificato questo un po 'di più, ho apportato alcune modifiche, un po' di codice un po 'più dettagliato, ma gestisce più azioni in modo appropriato.

• L'uso di e.charCode invece di e.keyCode e il controllo di 0 valori salta molti tasti senza caratteri, senza codificare nulla di specifico per una determinata lingua o set di caratteri. Da quanto ho capito, è leggermente meno compatibile, quindi i browser più vecchi, non tradizionali o mobili potrebbero non comportarsi come previsto da questo codice, ma ne vale la pena, comunque per la mia situazione.

• Il confronto con un elenco di codici di punteggiatura noti impedisce loro di essere visti come falsi negativi, poiché non sono interessati dal blocco maiuscole. Senza questo, l'indicatore di blocco maiuscole viene nascosto quando si digita uno di quei caratteri di punteggiatura. Specificando un set escluso, anziché uno incluso, dovrebbe essere più compatibile con i caratteri estesi. Questa è la parte più brutta, in casi speciali, e c'è qualche possibilità che le lingue non occidentali abbiano punteggiatura e / o codici di punteggiatura abbastanza diversi da essere un problema, ma ancora una volta vale la pena IMO, almeno per la mia situazione.

Reagire

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }

Basato sulla risposta di @joshuahedlund poiché ha funzionato bene per me.

Ho reso il codice una funzione in modo che possa essere riutilizzato e nel mio caso l'ho collegato al corpo. Può essere collegato al campo password solo se si preferisce.

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

Di Mottie e Diego Vieira di risposta di cui sopra è quello che abbiamo finito per usare e dovrebbe essere la risposta accettata ora. Tuttavia, prima di notarlo, ho scritto questa piccola funzione javascript che non si basa sui codici carattere ...

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

Quindi chiamalo in un gestore di eventi in questo modo capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Ma ancora una volta, abbiamo finito per usare la risposta di @Mottie e @Diego Vieira

In questo codice di seguito verrà mostrato un avviso quando si bloccano le maiuscole e premono il tasto usando Maiusc.

se restituiamo false; quindi il carattere corrente non verrà aggiunto alla pagina di testo.

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

prova questo semplice codice in facile da capire

Questo è lo script

 <script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
  document.getElementById('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

E l'Html

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
 <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 

prova a usare questo codice.

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

In bocca al lupo :)

Potresti usare questo script . Dovrebbe funzionare bene su Windows anche se si preme il tasto Maiusc, ma in tal caso non funzionerà su Mac OS.

Ecco un plug-in jquery personalizzato, che utilizza l'interfaccia utente jquery, composto da tutte le buone idee in questa pagina e sfrutta il widget tooltip. Il messaggio di blocco maiuscole viene applicato automaticamente a tutte le caselle della password e non richiede modifiche al codice HTML corrente.

Codice plug-in personalizzato ...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style="white-space: nowrap;"/>')
                        .append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
                var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed

                // uppercase w/out shift or lowercase with shift == caps lock
                if ((isUp && !isShift) || (isLow && isShift)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

Applica a tutti gli elementi della password ...

$(function () {
    $(":password").capsLockAlert();
});

Codice Javascript

<script type="text/javascript">
   function isCapLockOn(e){
   kc = e.keyCode?e.keyCode:e.which;
   sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
   if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
       document.getElementById('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

Ora abbiamo bisogno di associare questo script usando HTML

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

è tardi, lo so, ma questo può essere d'aiuto a qualcun altro.

quindi ecco la mia soluzione più semplice (con caratteri turchi);

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

Quindi ho trovato questa pagina e non mi sono piaciute molto le soluzioni che ho trovato, quindi ne ho capito uno e lo sto offrendo a tutti voi. Per me, importa solo se il blocco maiuscole è attivo se sto scrivendo lettere. Questo codice ha risolto il problema per me. È semplice e veloce e ti offre una variabile capsIsOn da consultare ogni volta che ne hai bisogno.

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if(letter.length===1 && letter.match(/[A-Za-z]/)){
        if(letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if(capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});

Quando si digita, se il Caplock è attivato, è possibile convertire automaticamente il carattere corrente in minuscolo. In questo modo, anche se i caplock sono attivi, non si comporterà come nella pagina corrente. Per informare i tuoi utenti potresti visualizzare un testo che dice che i blocchi sono attivati, ma che le voci del modulo vengono convertite.

Esiste una soluzione molto più semplice per rilevare il blocco maiuscole:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}