Como saber se o caps lock está ativado usando JavaScript?

Como saber se o caps lock está ativado usando JavaScript?

Porém, uma ressalva: eu pesquisei no google e a melhor solução que encontrei foi anexar um onkeypressevento a todas as entradas e, em seguida, verificar cada vez se a letra pressionada estava em maiúscula e, se estiver, verificar se o turno também foi pressionado. Caso contrário, o caps lock deve estar ativado. Parece realmente sujo e apenas ... um desperdício - certamente existe uma maneira melhor do que isso?

Você pode tentar. Adicionado um exemplo de trabalho. Quando o foco está na entrada, ativar a tecla caps lock faz com que o led fique vermelho, caso contrário, verde. (Não testei no mac / linux)

NOTA: Ambas as versões estão funcionando para mim. Obrigado por contribuições construtivas nos comentários.

VERSÃO ANTIGA: https://jsbin.com/mahenes/edit?js,output

Além disso, aqui está uma versão modificada (alguém pode testar no mac e confirmar)

NOVA VERSÃO: https://jsbin.com/xiconuv/edit?js,output

NOVA VERSÃO:

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;
}

VERSÃO ANTIGA:

função 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;

}

Para caracteres internacionais, verificação adicional pode ser adicionada para as seguintes chaves, conforme necessário. Você deve obter o intervalo do código de chave dos caracteres nos quais está interessado, pode estar usando uma matriz de mapeamento de teclas que conterá todas as chaves válidas de casos de uso que você está abordando ...

AZ maiúsculo ou 'Ä', 'Ö', 'Ü', aZ minúsculo ou 0-9 ou 'ä', 'ö', 'ü'

As teclas acima são apenas representação de amostra.

No jQuery,

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

Evite o erro, como a tecla backspace, s.toLowerCase() !== sé necessário.

Você pode usar a KeyboardEventpara detectar várias chaves, incluindo o caps lock nos navegadores mais recentes.

A getModifierStatefunção fornecerá o estado para:

• Alt
• AltGraph
• Caps Lock
• Ao controle
• Fn (Android)
• Meta
• Num Lock
• SO (Windows e Linux)
• ScrollLock
• Mudança

Esta demonstração funciona em todos os principais navegadores, incluindo dispositivos móveis ( caniuse ).

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

Você pode detectar maiúsculas usando "é maiúscula na letra e nenhum turno pressionado" usando uma captura de tecla no documento. Mas é melhor ter certeza de que nenhum outro manipulador de teclas pressiona o balão de eventos antes que ele chegue ao manipulador no 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')
  }
}

Você pode capturar o evento durante a fase de captura em navegadores compatíveis, mas parece um pouco inútil, pois não funcionará em todos os navegadores.

Não consigo pensar em outra maneira de realmente detectar o status do caps lock. A verificação é simples de qualquer maneira e se caracteres não detectáveis ​​foram digitados, bem ... então a detecção não era necessária.

Havia um artigo sobre 24 maneiras neste último ano. Muito bom, mas não possui suporte a caracteres internacionais (use toUpperCase()para contornar isso).

Muitas respostas existentes verificarão se o caps lock está ativado quando o shift não estiver pressionado, mas não o verificarão se você pressionar shift e ficar em minúsculas ou verificará isso, mas também não verificará se o caps lock está desativado ou verificará isso, mas considerará chaves não-alfa como 'desativadas'. Aqui está uma solução jQuery adaptada que exibirá um aviso se uma tecla alfa for pressionada com maiúsculas (shift ou sem turno), desativará o aviso se uma tecla alfa for pressionada sem maiúsculas, mas não ativará ou desativará o aviso quando números ou outras teclas são pressionadas.

$("#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)
  });

No JQuery. Isso cobre a manipulação de eventos no Firefox e verificará caracteres inesperados em maiúsculas e minúsculas. Isso pressupõe um <input id="password" type="password" name="whatever"/>elemento e um elemento separado com o id ' capsLockWarning' que possui o aviso que queremos mostrar (mas está oculto de outra forma).

$('#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();
    }
});

As principais respostas aqui não funcionaram para mim por alguns motivos (código não comentado com um link inoperante e uma solução incompleta). Então, passei algumas horas testando todo mundo e obtendo o melhor que pude: aqui está o meu, incluindo jQuery e não-jQuery.

jQuery

Observe que o jQuery normaliza o objeto de evento, portanto algumas verificações estão ausentes. Também o reduzi a todos os campos de senha (já que esse é o maior motivo para precisar) e adicionei uma mensagem de aviso. Isso foi testado no Chrome, Mozilla, Opera e IE6-8. Estável e captura todos os estados do capslock, EXCETO quando números ou espaços são pressionados.

/* 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>");

Sem jQuery

Algumas das outras soluções sem jQuery não possuíam fallbacks do IE. @Zappa corrigiu isso.

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: Confira as soluções de @Borgar, @Joe Liversedge e @Zappa e o plug-in desenvolvido por @Pavel Azanov, que ainda não tentei, mas é uma boa ideia. Se alguém souber como expandir o escopo além do A-Za-z, edite-o. Além disso, as versões jQuery desta pergunta são fechadas como duplicadas, por isso estou postando as duas aqui.

Usamos getModifierStatepara verificar se o caps lock é apenas um membro de um evento de mouse ou teclado, portanto não podemos usar um onfocus. As duas maneiras mais comuns pelas quais o campo da senha ganhará foco é com um clique ou uma guia. Usamos onclickpara verificar se há um clique do mouse na entrada e onkeyuppara detectar uma guia do campo de entrada anterior. Se o campo de senha for o único campo da página e for focado automaticamente, o evento não ocorrerá até que a primeira tecla seja liberada, o que é razoável, mas não ideal. foco, mas, na maioria dos casos, essa solução funciona como um encanto.

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

Eu sei que esse é um tópico antigo, mas achei que eu iria responder caso isso ajudasse outras pessoas. Nenhuma das respostas para a pergunta parece funcionar no IE8. No entanto, encontrei esse código que funciona no IE8. (Havent testou qualquer coisa abaixo do IE8 ainda). Isso pode ser facilmente modificado para jQuery, se necessário.

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 a função é chamada através do evento onkeypress, assim:

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

Esta é uma solução que, além de verificar o estado durante a gravação, também alterna a mensagem de aviso toda vez que a Caps Locktecla é pressionada (com algumas limitações).

Ele também suporta cartas não-inglês fora da faixa AZ, como ele verifica a cadeia de caracteres contra toUpperCase()e toLowerCase()em vez de verificar contra o intervalo de caracteres.

$(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>

Observe que observar a alternância entre maiúsculas e minúsculas é útil apenas se conhecermos o estado da maiúscula antes de Caps Lockpressionar a tecla. O estado atual de caps lock é mantido com uma capspropriedade JavaScript no elemento de senha. Isso é definido na primeira vez que validamos o estado de maiúsculas e minúsculas quando o usuário pressiona uma letra que pode ser maiúscula ou minúscula. Se a janela perder o foco, não podemos mais observar a alternância entre maiúsculas e minúsculas, portanto, precisamos redefinir para um estado desconhecido.

Recentemente, houve uma pergunta semelhante no hashcode.com, e eu criei um plugin jQuery para lidar com isso. Ele também suporta o reconhecimento de caps lock em números. (No layout de teclado alemão padrão, o caps lock afeta os números).

Você pode verificar a versão mais recente aqui: jquery.capsChecker

Para jQuery com twitter bootstrap

Marque as maiúsculas bloqueadas para os seguintes caracteres:

AZ maiúsculo ou 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' , '=', ':', ';', '*', '' '

aZ minúsculo ou 0-9 ou 'ä', 'ö', 'ü', '.', ',', '+', '#'

/* 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>");

demonstração ao vivo no jsfiddle

Uma variável que mostra o estado de caps lock:

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

funciona em todos os navegadores => canIUse

Esta resposta baseada em jQuery postada por @ user110902 foi útil para mim. No entanto, melhorei um pouco para evitar uma falha mencionada no comentário de @B_N: falha ao detectar o CapsLock enquanto você pressiona Shift:

$('#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');
    }
});

Assim, ele funcionará mesmo enquanto pressiona Shift.

Este código detecta caps lock, não importa o caso ou se a tecla Shift for pressionada:

$('#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');
    }
});

Eu escrevi uma biblioteca chamada capsLock, que faz exatamente o que você deseja que ela faça.

Basta incluí-lo em suas páginas da web:

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

Em seguida, use-o da seguinte maneira:

alert(capsLock.status);

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

Veja a demonstração: http://jsfiddle.net/3EXMd/

O status é atualizado quando você pressiona a tecla Caps Lock. Ele usa apenas o hack da tecla Shift para determinar o status correto da tecla Caps Lock. Inicialmente, o status é false. Então cuidado.

Ainda outra versão, clara e simples, lida com capsLock deslocado, e não restrita a 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];

Edit: O sentido de capsLockOn foi revertido, doh, corrigido.

Editar # 2: depois de verificar isso um pouco mais, fiz algumas alterações, um código um pouco mais detalhado, infelizmente, mas ele lida com mais ações de maneira apropriada.

• O uso de e.charCode em vez de e.keyCode e a verificação de valores 0 ignoram muitas pressionamentos de tecla sem caracteres, sem codificar nada específico para um determinado idioma ou conjunto de caracteres. Pelo que entendi, é um pouco menos compatível, portanto navegadores mais antigos, não convencionais ou móveis podem não se comportar conforme o esperado, mas vale a pena, de qualquer maneira, para a minha situação.

• A verificação em uma lista de códigos de pontuação conhecidos evita que eles sejam vistos como falsos negativos, pois não são afetados pelo caps lock. Sem isso, o indicador caps lock fica oculto quando você digita algum desses caracteres de pontuação. Ao especificar um conjunto excluído, em vez de um incluído, ele deve ser mais compatível com caracteres estendidos. Esse é o bit mais feio e mais especial, e há algumas chances de que os idiomas não ocidentais tenham códigos de pontuação e / ou pontuação diferentes o suficiente para serem um problema, mas novamente vale a pena IMO, pelo menos para a minha situação.

Reagir

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;
            }
        }
    }

Com base na resposta de @joshuahedlund, uma vez que funcionou bem para mim.

Eu fiz do código uma função para que ele possa ser reutilizado e o vinculei ao corpo no meu caso. Ele pode ser vinculado ao campo de senha apenas se você preferir.

<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>

De Mottie e de Diego Vieira resposta acima é o que acabamos usando e deve ser a resposta aceita agora. No entanto, antes que eu percebesse, escrevi essa pequena função javascript que não depende de códigos de caracteres ...

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;
  }
}

Em seguida, chame-o em um manipulador de eventos como esse capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Mas, novamente, acabamos usando as respostas de @Mottie e @Diego Vieira

Neste código abaixo, será exibido um alerta quando o Caps travar e eles pressionam a tecla usando shift.

se retornarmos falso; o caractere atual não será anexado à página de texto.

$('#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;
    }
});

experimente este código simples e fácil de entender

Este é o 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 o html

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

tente usar esse código.

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

Boa sorte :)

Você poderia usar este script . Ele deve funcionar bem no Windows, mesmo que a tecla Shift seja pressionada, mas não funcionará no Mac OS.

Aqui está um plug-in jquery personalizado, usando o jquery ui, composto de todas as boas idéias nesta página e aproveita o widget de dica de ferramenta. A mensagem caps lock é aplicada automaticamente a todas as caixas de senha e não requer alterações no seu html atual.

Código de plug-in personalizado ...

(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);

Aplicar a todos os elementos de senha ...

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

Código 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>

Agora precisamos associar esse script usando HTML

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

é tarde, eu sei, mas isso pode ser útil para outra pessoa.

então aqui está a minha solução mais simples (com caracteres turcos);

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

Encontrei esta página e não gostei muito das soluções que encontrei, então descobri uma e a ofereço a todos vocês. Para mim, só importa se o caps lock está ativado se eu estiver digitando letras. Este código resolveu o problema para mim. É rápido e fácil e fornece uma variável capsIsOn para fazer referência sempre que você precisar.

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 você digita, se o caplock estiver ativado, ele poderá converter automaticamente o caractere atual em minúsculas. Dessa forma, mesmo se o caplocks estiver ativado, ele não se comportará como na página atual. Para informar seus usuários, você pode exibir um texto informando que os caplocks estão ativados, mas que as entradas do formulário são convertidas.

Existe uma solução muito mais simples para detectar caps-lock:

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