Como você dizer se Caps Lock está ativado usando JavaScript?
https://stackoverflow.com/questions/348792
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como você dizer se Caps Lock está usando JavaScript?
Uma ressalva, porém: eu fiz google e a melhor solução que eu poderia encontrar era anexar um evento onkeypress a cada entrada, em seguida, verificar cada vez que se a letra pressionada foi maiúscula, e se fosse, em seguida, verificar se mudança foi também pressionado. Se não foi, portanto, CAPS LOCK deve estar ligado. Este se sente muito sujo e só ... desperdício -? Certamente há uma maneira melhor do que este
Solução
Encontrei este interessante .... Você pode experimentá-lo ..
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, verificação adicional pode ser adicionado para as seguintes chaves, conforme necessário. Você tem que obter a gama keycode para caracteres que você está interessado, pode ser usando uma matriz mapeamento de teclado que irá realizar todas as chaves de casos de uso válidos você está abordando ...
maiúscula A-Z ou 'a', 'O', 'U', minúsculas a-Z ou 0-9 ou 'a', 'O', 'u'
As teclas acima são apenas a representação da amostra.
Outras dicas
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 de retrocesso, é necessário s.toLowerCase() !== s.
Você pode usar um KeyboardEvent para detectar inúmeras chaves incluindo o caps lock na maioria dos navegadores recentes.
O getModifierState função irá fornecer o estado para :
- Alt
- AltGraph
- CapsLock
- Controle
- Fn (Android)
- Meta
- NumLock
- OS (Windows e Linux)
- ScrollLock
- Mudança
Esta demonstração funciona em todos os principais navegadores, incluindo 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 fechamento de tampões usando "é letra maiúscula e não Shift pressionada" usando uma captura keypress no documento. Mas então é melhor você ter certeza de que nenhum outro manipulador de pressionamento de tecla aparece a bolha evento 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ê poderia pegar o evento durante a fase de captura em navegadores que suportam isso, mas parece um pouco inútil, uma vez que não irá funcionar em todos os navegadores.
Eu não consigo pensar em qualquer outra forma de realmente detectar Caps Lock status. O cheque é de qualquer maneira simples e se caracteres não detectáveis ??foram digitados, bem ... então a detecção não era necessário.
Houve um artigo sobre 24 maneiras sobre este último ano. Muito bom, mas não tem suporte caráter internacional (utilização toUpperCase() de contornar isso).
Muitas respostas existentes irá verificar Caps Lock quando mudança não é pressionado, mas não irá verificar se você pressionar a tecla Shift e obter minúsculas, ou irá verificar isso, mas também não vai verificar se há Caps Lock sendo off, ou irá verificar para isso, mas vai considerar chaves não-alfa como 'off'. Aqui é uma solução jQuery adaptada que irá mostrar um aviso se uma chave alfa é pressionado com tampas (shift ou nenhuma mudança), irá desligar o aviso se uma chave alfa é pressionado sem tampas, mas não vai virar a advertência ou desliga 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)
});
Em JQuery. Isto cobre o tratamento de eventos no Firefox e irá verificar para ambos os caracteres maiúsculos e minúsculos inesperados. Isto pressupõe uma <input id="password" type="password" name="whatever"/>element e um elemento separado com id 'capsLockWarning' que tem o aviso queremos mostrar (mas está escondido em contrário).
$('#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 funcionou para mim por um par de razões (código comentado-un com um link morto e uma solução incompleta). Então eu passei algumas horas tentando todos estão fora e recebendo o melhor que pude:. Aqui é meu, incluindo jQuery e não-jQuery
jQuery
Note que jQuery normaliza o objeto evento para algumas verificações estão em falta. Eu também reduzi-lo a todos os campos de senha (já que essa é a maior razão para precisar) e acrescentou uma mensagem de aviso. Este foi testado no Chrome, Mozilla, Opera e IE6-8. Estável e capturas todos os estados 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 jQuery-less faltava fallbacks IE. @Zappa remendado-lo.
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, eo plugin desenvolvidos pela @Pavel Azanov, que eu não tentei, mas é uma boa idéia. Se alguém sabe uma maneira de expandir o escopo além do A-Za-z, edite distância. Além disso, versões jQuery desta questão estão fechados como duplicado, então é por isso que estou postando tanto aqui.
Eu sei que este é um tema antigo, mas pensei que eu iria alimentar de volta em caso de ajuda outros. Nenhuma das respostas para a pergunta parece trabalhar no IE8. Eu fiz no entanto encontrar este código que funciona no IE8. (Havent testado qualquer coisa abaixo 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 estado quando se escreve, também alterna a mensagem de aviso cada vez que o Caps Lock tecla for pressionada (com algumas limitações).
Ele também suporta cartas não-inglês fora do intervalo A-Z, 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>
Note que os limites observando bloquear alternância só é útil se nós sabemos o estado do caps lock antes do tecla Caps Lock tecla é pressionada. O estado de bloqueio tampas atuais é mantido com um caps JavaScript propriedade no elemento senha. Isso é definido pela primeira vez temos uma validação dos Caps Lock estado quando o usuário pressiona uma letra que pode ser maiúsculas ou minúsculas. Se a janela perde o foco, não podemos mais observar fechamento de tampões alternando, por isso precisamos redefinir a um estado desconhecido.
Nós usamos getModifierState para verificar Caps Lock, é apenas um membro de um evento de mouse ou teclado por isso não podemos usar um onfocus. Maioria das duas formas comuns de que o campo de senha vai ganhar foco é com um clique ou uma guia. Usamos onclick para verificar se há um clique do mouse dentro da entrada, e usamos onkeyup para detectar uma guia do campo de entrada anterior. Se o campo de senha é o único campo na página e é auto-centrada, em seguida, o evento não vai acontecer até a primeira chave é liberada, o que é ok, mas não é o ideal, você realmente quer Caps Lock dicas de ferramentas para visualização uma vez que os ganhos de campo password foco, mas para a maioria dos casos esta 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");
}
}
Recentemente houve um pergunta semelhante sobre hashcode.com, e eu criei um plugin jQuery para lidar com ele. Ele também suporta o reconhecimento de Caps Lock números. (Por padrão bloqueio tampas de layout de teclado alemão tem efeito sobre números).
Você pode verificar a versão mais recente aqui: jquery.capsChecker
Para jQuery com o twitter inicialização
Verifique tampas bloqueado para os seguintes caracteres:
maiúsculas AZ ou 'a', 'O', 'U', '!' '",', '§', '$', '%', 'e', ??'/', '(', ')', '=', ':', ';', '*', '' '
minúsculas a-Z ou 0-9 ou 'a', 'O', 'U', ' '',', '+', '#'
/* 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>");
Uma variável que mostra Caps Lock estado:
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;
});
obras em todos os navegadores => canIUse
Este código detecta tampas não bloquear importa o caso ou se a tecla Shift é 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 que ele faça.
Apenas incluí-lo em suas páginas web:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Em seguida, usá-lo da seguinte forma:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
Veja a demo: http://jsfiddle.net/3EXMd/
O status é atualizado quando você pressiona a tecla Caps Lock. Ele utiliza apenas o hack tecla Shift para determinar o status correto da tecla Caps Lock. Inicialmente, o estado é false. Então, cuidado.
No entanto, outra versão, claro e simples, alças deslocou CapsLock, e não restrita para ascii eu 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];
Editar:. Senso de capsLockOn foi revertida, dó, fixa
Edit # 2:. Depois de conferir esse material um pouco mais, eu fiz algumas mudanças, código um pouco mais detalhada, infelizmente, mas ele lida com mais ações de forma adequada
-
Usando e.charCode vez de e.KeyCode e verificação de valores 0 pula uma série de teclas pressionadas que não são caracteres, sem codificação nada específico para um determinado idioma ou charset. No meu entendimento, é um pouco menos compatíveis, de modo mais velhos, não-mainstream, ou navegadores móveis não podem se comportar como este espera de código, mas vale a pena, para a minha situação de qualquer maneira.
-
verificado contra uma lista de códigos de pontuação conhecidos os impede de serem vistos como falsos negativos, uma vez que não é afetado por Caps Lock. Sem isso, o caps lock indicador fica escondido quando você digitar qualquer um desses caracteres de pontuação. Ao especificar um conjunto excluídos, em vez de um incluído, ele deve ser mais compatível com caracteres estendidos. Este é o mais feio, especial-casiest pouco, e há alguma chance de que línguas não-ocidentais têm diferentes códigos de pontuação e / ou pontuação suficiente para ser 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;
}
}
}
Esta resposta baseada em jQuery postado por @ user110902 foi útil para mim. No entanto, eu melhorei um pouco para evitar uma falha mencionado no comentário do @B_N: Falhou a detecção de CapsLock enquanto você pressionar a tecla 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 vai trabalhar mesmo enquanto pressiona Shift.
Com base na resposta de @joshuahedlund uma vez que funcionou bem para mim.
Eu fiz o código de uma função para que ele possa ser reutilizado, e ligada ao corpo no meu caso. Ele pode ser ligado ao campo de senha somente 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 o Diego Vieira resposta acima é o que acabamos usando e deve ser a resposta aceita agora. No entanto, antes de eu notei isso, eu escrevi essa função javascript pouco que não dependem 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, chamá-lo em um manipulador de eventos como assim capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
Mas, novamente, nós acabamos usando apenas @Mottie s e @Diego Vieira s resposta
Neste código abaixo será show de alerta quando o Caps Lock e pressione a tecla usando turno.
Se nós return false; então caractere atual não vai anexar a 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;
}
});
tentar fazer isso código simples em fácil compreender
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>
tentar 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ê pode usar este script . Ele deve funcionar bem no Windows, mesmo se a tecla Shift é pressionada, mas não irá funcionar no Mac OS se assim for.
Aqui é um plugin jQuery personalizado, usando jQuery UI, composta por todas as boas idéias nesta página e aproveita o widget dica. A mensagem Caps Lock está auto aplicado todas as caixas de senha e não requer alterações no seu html atual.
plugue 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 $('<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 alguém útil pessoa.
Então aqui está a minha solução simpliest (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 = '';
}
}
Então, eu encontrei esta página e não realmente como as soluções que eu encontrei então achei um fora e estou oferecendo-o a todos vocês. Para mim, só importa se o bloqueio caps é sobre se eu estou escrevendo letras. Este código resolveu o problema para mim. Sua rápida e fácil e dá-lhe uma variável capsIsOn de referência sempre que 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 Caplock está ligado, ele poderia converter automaticamente o caractere atual em minúsculas. Dessa forma, mesmo se Travas está ligado, ele não vai se comportar como ele está na página atual. Para informar seus usuários que você poderia exibir um texto dizendo que Travas está ligado, mas que as entradas de formulário são convertidos.
Há 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;
}
}
