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

242

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?

nickf
fonte
198
PORQUE MUITOS MEUS USUÁRIOS PREENCHEM SUAS FORMAS ASSIM COMO ESTE.
nickf
7
@nicf: Se esse é o motivo, por que você não executa um regexp na entrada e pede que eles parem de gritar se houver muitas letras maiúsculas?
alguns
155
Há uma razão muito melhor para fazer isso. Se um usuário estiver digitando uma senha, seria muito útil avisá-lo se o capslock estiver ativado.
T Nguyen
23
Parece que os navegadores devem implementar um "Caps Lock está em" alerta quando o tipo de utilizadores em input type=passwordcampos (semelhante a validação de endereços de e-mail para input type=emailem cromo, etc.)
nothingisnecessary
8
Excelente pergunta, mas a resposta aceita é de 8 anos. A melhor resposta é aqui
Mac

Respostas:

95

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.

rajesh pillai
fonte
1
Possivelmente, não é a melhor implementação, mas quando eu a escrevi, estava tentando mantê-la simples. Eu acho que a única maneira de você realmente fazer isso com a maldade que precisa cobrir para diferentes navegadores.
2
Descobri que usar isso com pressionamento de tecla (no chrome) faz com que todos os códigos sejam capturados como caps. Se eu usar o pressionamento de tecla, ele funciona.
Tim
2
Encontrar cada combinação de caracteres possível para todos os personagens internacionais está fadado a perder alguns casos. Use os métodos Maiúsculas / Minúsculas para verificar a caixa.
temor
3
Surpreendente que uma resposta completamente falsa - charcodes e ascii (!!!) - pode ser muito positiva. Ninguém nunca conferiu ???
GameAlchemist
1
Observe que, de acordo com a Mozilla , event.which foi removido dos padrões da Web.
Verism
130

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.

user110902
fonte
5
na verdade ... fromCharCode eliminou a necessidade de eu verificar. no entanto, deve-se notar que keydown e keypress fornecem códigos de códigos diferentes, e foi aí que eu errei em primeiro lugar.
Shea
4
-1 aC isso APENAS funciona se eles não pressionaram shift enquanto o CAPS está ativado.
1
Se alguém quiser ver um exemplo ao vivo com o bootstrap para que você possa ver aqui bootply.com/91792
Govinda Rajbhar
Esta resposta foi útil para mim. Aprimorei o condicional nesta resposta , devido à falha mencionada por @D_N, de que ele não funciona enquanto pressiona shift.
21818 SebasSBM
105

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
});
Mottie
fonte
6
Eu respondi isso em uma pergunta dupe / similar e fui atualizado por outro usuário que agora tem suporte para o Chrome. Confirmei isso, então agora funciona em todos os principais navegadores - e deve ser a melhor solução para esta questão
Ian Clark
caniuse.com/#search=getModifierState diz que atualmente não é suportado no Safari (ainda?). Portanto, em todos os principais navegadores pode não ser o caso ainda.
Jens Kooij #
2
É suportado no Safari agora.
Mottie 31/03/19
1
E ainda assim ele detecta a imprensa capslock e não pode obter o estado capslock geral quando o usuário entra na forma ...
faísca
Isso parece funcionar, exceto ao pressionar a tecla caps lock na posição desligado . Não recebe essa entrada até a próxima tecla ser pressionada. Isso estava no Chrome para OS X. Não tenho certeza se isso é algo que se estende por navegadores e sistemas operacionais.
Ashraf Slamang
24

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

Borgar
fonte
Na verdade, era isso que eu estava procurando. Isso funciona com seqüências de caracteres latinas e cirílicas. Obrigado!
Mladen Janjetovic
Isso funciona bem, mas teclas como ESPAÇO e numerais indicam o aviso. Conhece uma solução alternativa (igualmente concisa / elegante)?
1
Além disso, é bom que você observe a incompletude, mas ainda está incompleta. Não sei como corrigir isso com esse método.
11

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)
  });
joshuahedlund
fonte
11

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();
    }
});
Joe Liversedge
fonte
Não sei por que, mas esse método não funciona no primeiro pressionamento de tecla (testado apenas no Chrome).
Poderia ser o problema de ocultação de campo vazio? Não foi possível que isso funcionasse corretamente, pelo menos no Chrome. Isso acontece automaticamente em muitos outros navegadores (pelo menos na minha versão abaixo) porque os backspaces contam e apagam o mssg.
Nota : conforme você utilizou corretamente aqui, é necessário usar o keypressevento para fazer uso de diferentes caixas na entrada, porque ambas keydowne keyupsempre retornarão maiúsculas . Consequentemente, isso não irá disparar a chave capslock ... se você pretende combinar come.originalEvent.getModifierState('CapsLock')
KyleMit
6

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.


fonte
4
Uma boa solução deve sempre incluir suporte para letras fora das letras em inglês AZ. Qualquer outra solução é um insulto a quase todos os idiomas que não o inglês.
temor
6

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

Ryan Marin
fonte
Soberbo! Simples, conciso e sem falhas na minha implementação.
Sirtastic 20/09/18
1
@ Ryan: Obrigado pela contribuição! É uma boa, exemplo limpa do código, embora eu gostaria de destacar a sua resposta é basicamente o mesmo que a resposta de Mottie partir de 2015, onde ambos empregamevent.getModifierState("CapsLock").
Mac
5

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> 
Zappa
fonte
Obrigado pela correção do IE8. Incorporei-o na minha resposta reformulada (abaixo). Isso é sólido, no entanto.
5

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.

temor
fonte
2
Boa ideia. Se você estiver exibindo um aviso ao usuário de que o caps lock está ativado, provavelmente é uma boa ideia desativá-lo imediatamente quando o caps lock estiver desativado; caso contrário, você poderá confundir o usuário.
Ajedi32
3

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

Pavel Azanov
fonte
3

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

ramiz4
fonte
3

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

Alice Rocheman
fonte
1
Promovido por dar uma resposta atualizada a uma pergunta antiga. Você pode querer adicionar algo como uma manchete dizendo algo como "para navegadores modernos (2017->) tentar fazer isso" ou "Atualização para 2017"
eon
3

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.

SebasSBM
fonte
2

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');
    }
});
formixiano
fonte
Isso faz com que o espaço e o backspace sejam detectados como maiúsculas no Firefox.
Adrian Rosca
2

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.

Aadit M Shah
fonte
Esta é uma solução realmente engenhosa. Mas há o erro de que, se o Caps Lock estiver ativado quando a página ganhar foco, o objeto "capslock" começará com o estado incorreto (desativado).
Ric
De fato, começa com um estado incorreto. No entanto, quando você pressiona qualquer tecla, ela corrige automaticamente seu estado. Se você puder descobrir uma maneira de configurá-lo para o estado correto quando a página ganhar foco, ficaria feliz em mesclar seu código.
Aadit M Shah
2

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.

enigment
fonte
2

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;
            }
        }
    }
José Araújo
fonte
1

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>
Cedric Simon
fonte
1

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

Chris
fonte
0

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;
    }
});
Naga Harish M
fonte
Só funciona se o caps lock estiver ativado. Se o caps lock estiver desativado, ele ainda informa que o caps lock está ativado, mas com a tecla shift pressionada (ambas com a tecla shift pressionada ou não).
temor
Ok Lamento que @awe
Naga Harish H
0

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> 
sourabh kasliwal
fonte
0

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

Oday Fraiwan
fonte
0

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.

Horia Rudan
fonte
0

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();
});
Ben Gripka
fonte
0

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> 
M Arfan
fonte
0

é 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 = '';
    }
}
nadir
fonte
0

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

Mike Sraj
fonte
-1

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.

Frederik.L
fonte
Sim, mas você ainda precisará detectar o caps lock. Além disso, isso significa que você está proibindo letras maiúsculas de senhas, o que é subótimo.
21412 Dave McGill / Marte /
para detectar se o caps lock está ativado, é necessário verificar se a versão em minúscula do char que você enviou é diferente, se for -> caps lock e, em seguida, «Aviso: você está usando o caps lock, mas nosso sistema está convertendo em minúsculas », eu acho que javascript não é feito para detectar o fechamento de tampões depois de todos (verificações fechamento de tampões precisa de um acesso ao sistema), você deve encontrar o caminho de volta que melhor se encaixa a sua necessidade
Frederik.L
-1

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;
    }
}
Ron Tornambe
fonte