Como você sabe se o Caps Lock está usando JavaScript?

Como você sabe se o Caps Lock está usando JavaScript?

Uma ressalva: eu fiz o google e a melhor solução que pude encontrar foi append um evento onkeypress a cada input, então verifique cada vez se a letra pressionada estava em maiúsculas, e se estivesse, então verifique se o turno também estava pressionado. Se não foi, portanto, o caps lock deve estar ativado. Isso parece muito sujo e apenas … um desperdício – certamente há uma maneira melhor do que isso?

   

Achei isso interessante …. Você pode tentar ..

 function 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, a verificação adicional pode ser adicionada para as seguintes chaves, conforme necessário. Você tem que obter o intervalo de código de tecla para os caracteres que você está interessado, pode ser usando uma matriz de mapeamento de teclado que irá conter todas as chaves de caso de uso válidas que você está abordando ...

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

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

Em 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 um KeyboardEvent para detectar várias teclas, incluindo o caps lock nos navegadores mais recentes.

A function getModifierState 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 mobile ( caniuse ).

 document.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 o caps lock usando “é maiúscula e não pressionada” usando uma captura de tecla no documento. Mas é melhor você ter certeza de que nenhum outro manipulador de pressionamento de tecla mostra a bolha de events antes de chegar 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 ) { // incomplete: shift + caps MAY = lowercase // alert('caps is on') } } 

Você pode pegar o evento durante a fase de captura em navegadores que suportam isso, mas parece um pouco inútil, pois não funciona em todos os navegadores.

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

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

Muitas respostas existentes verificarão se o caps lock está ativado quando o turno não está pressionado, mas não o verificará 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 irá considerar chaves não alfa como ‘off’. Aqui está uma solução jQuery adaptada que mostrará um aviso se uma tecla alfa for pressionada com maiúsculas (shift ou nenhum turno), desligará o aviso se uma tecla alfa for pressionada sem maiúsculas, mas não desligará ou ligará 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 (ie not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet) }); 

Na JQuery. Isto cobre a manipulação de events no Firefox e verificará tanto os caracteres maiúsculos e minúsculos inesperados. Isso pressupõe um elemento e um elemento separado com 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 respostas principais aqui não funcionaram para mim por alguns motivos (código não comentado com um link inativo e uma solução incompleta). Então eu passei algumas horas tentando todos e obtendo o melhor que pude: aqui está o meu, incluindo jQuery e não-jQuery.

jQuery

Observe que o jQuery normaliza o object de evento, portanto, algumas verificações estão faltando. Eu também reduzi a todos os campos de senha (já que esse é o maior motivo para precisar dela) e adicionei uma mensagem de aviso. Isso foi testado no Chrome, Mozilla, Opera e IE6-8. Estável e captura todos os estados de maiúsculas, 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(" 

Sem jQuery

Algumas das outras soluções sem jQuery não tinham fallbacks do IE. @Zappa corrigiu.

 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 do @Borgar, @Joe Liversedge e @Zappa, e o plugin desenvolvido pelo @Pavel Azanov, que eu não tentei, mas é uma boa idéia. Se alguém souber uma maneira de expandir o escopo além de A-Za-z, edite. Além disso, as versões jQuery desta questão são fechadas como duplicadas, por isso estou postando ambas aqui.

Eu sei que este é um tópico antigo, mas pensei que eu voltaria no caso de ajudar os outros. Nenhuma das respostas para a pergunta parece funcionar no IE8. No entanto, eu 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 function é chamada através do evento onkeypress como este:

   

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

Ele também suporta letras não inglesas fora do intervalo AZ, já que ele verifica o caractere string contra toUpperCase() e toLowerCase() vez de verificar 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(); } }); }); 
   CAPS 

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 bloqueio de maiúsculas afeta os números).

Você pode verificar a última versão aqui: jquery.capsChecker

Para jQuery com bootstrap twitter

Verifique os limites bloqueados para os seguintes caracteres:

maiúsculas AZ ou ‘Ä’, ‘Ö’, ‘Ü’, ‘!’, ‘”,’ § ‘,’ $ ‘,’% ‘,’ & ‘,’ / ‘,’ (‘,’) ‘ , ‘=’, ‘:’, ‘;’, ‘*’, ” ‘

AZ minúscula 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 AZ 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 aZ 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(' 

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

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ê quer fazer.

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

  

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, e não restrito a ascii eu acho:

 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: Sentido de capsLockOn foi invertida, doh, fixo.

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

  • Usar e.charCode em vez de e.keyCode e verificar os valores 0 pula muitos pressionamentos de tecla sem caracteres, sem codificar nada específico para um determinado idioma ou conjunto de caracteres. Pelo que entendi, ele é um pouco menos compatível, portanto, navegadores mais antigos, não mainstream ou móveis podem não se comportar como esse código espera, mas vale a pena, para minha situação, de qualquer maneira.

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

Baseado na resposta de @joshuahedlund desde que funcionou bem para mim.

Eu fiz o código de uma function para que possa ser reutilizado e vinculá-lo ao corpo no meu caso. Pode ser vinculado ao campo de senha somente se você preferir.

       ...  
Capslock is ON !
...

A resposta de Mottie e Diego Vieira acima é o que acabamos usando e deve ser a resposta aceita agora. No entanto, antes que eu percebesse, escrevi essa pequena function de 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 events, como capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Mas, novamente, acabamos usando apenas a resposta de @Mottie e @Diego Vieira

Esta resposta baseada em jQuery postada por @ user110902 foi útil para mim. No entanto, eu o aprimorei um pouco para evitar uma falha mencionada no comentário do @B_N: ele falhou ao detectar o CapsLock enquanto você pressionava 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, funcionará mesmo pressionando Shift.

Neste código abaixo, será exibido alerta quando Caps lock estiver ativado e eles pressionarem a tecla usando shift.

se retornarmos falso; então 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; } }); 

tente isso código simples em fácil de entender

Este é o script

   

E o Html

   

tente usar este 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 em caso afirmativo.

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

Plug-in personalizado no código …

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

') .append($('')) .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

  

Agora precisamos associar esse script usando Html

   

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

  
this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/> {this.capsLockAlert()}

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

é tarde eu sei, mas isso pode ser útil para alguém.

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

Quando você digita, se o caplock estiver ativado, ele poderá converter automaticamente o caractere atual em minúsculas. Dessa forma, mesmo se o caplock estiver ativado, ele não se comportará como está na página atual. Para informar seus usuários, você pode exibir um texto informando que o caplock está ativado, mas que as inputs do formulário são convertidas.

There is a much simpler solution for detecting caps-lock:

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

In jQuery :

 $('some_element').keypress(function(e){ if(e.keyCode == 20){ //caps lock was pressed } }); 

This jQuery plugin ( code ) implements the same idea as in Rajesh’s answer a bit more succinctly.