Como fazer o aviso de tecla Caps Lock ativada? – javascript html

Pergunta:


Como fazer um aviso para quando a tecla Caps Lock estiver ativada no campo de senha?

A princípio gostaria de soluções em JavaScript puro, mas utilizando jQuery e relacionados serão aceitos.

Autor da pergunta UzumakiArtanis

OnoSendai

Utilize getModifierState('CapsLock') em um evento para detectar o estado. Exemplo funcional a seguir:

document.addEventListener('keydown', function( event ) {
  var flag = event.getModifierState && event.getModifierState('CapsLock');
  console.log( flag ? "Caps Lock ON": "Caps Lock OFF");
});
Clique nesta área e pressione Caps Lock.

Todos os browsers modernos (com exceção do Opera Mini) suportam este método:inserir a descrição da imagem aqui

Fonte.

A lógica por trás disso é simples: verificar se a letra digitada é maiúscula, e se o shift não está pressionado:

document.getElementById('txtSenha').onkeyup = function (e) {

  var key = e.charCode || e.keyCode;
  
  //enter, caps lock e backspace não interessam
  if(key == 13 || key == 8 || key == 46 || key == 20){
    return false;
  }
  
  //pega o último caracter digitado
	var tamanho = this.value.length
	var ultimo_caracter = this.value.substring(tamanho - 1);
  
  //Verifica se é maiúsculo, e se não é shift
  if(ultimo_caracter.toUpperCase() == ultimo_caracter 
  && ultimo_caracter.toLowerCase() != ultimo_caracter
  && !e.shiftKey)
  {
  	alert('Caps Lock está pressionado!');
  }
};
<input type="password" id="txtSenha" />

Este exemplo não usa JQuery. Você pode customizar também, permitir ou bloquear mais teclas, mas eu faria algo semelhante a isso mesmo

Você pode usar toUpperCase() de JavaScript para saber se a letra está em maiúscula, quando o evento keypress de Jquery é chamado.

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="example" />

Para mais informações:

toUpperCase(): https://www.w3schools.com/jsref/jsref_touppercase.asp

toLowerCase(): https://www.w3schools.com/jsref/jsref_tolowercase.asp

Resposta original em inglês: https://stackoverflow.com/a/896515/6647038

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *