Detectar se o caps lock está ativado com Jquery

Fala, pessoal!!
Estou desenvolvendo um projeto onde faço o login pelo Active Directory e ele considera letras maiúsculas e minúsculas na senha e quando o caps lock está ativado temos problemas pois o AD pode não encontrar o usuário com a senha informada se o valor estiver todo em maiúsculo ou todo em minúsculo.
E por exemplo no meu teclado a luz do caps lock fica em uma posição meio escondida, abaixo está uma solução para implementar a visualização em uma tela web.

A ideia é que apareça um aviso ao lado ou embaixo do campo de senha:
login_capslock

Para este efeito crie na sua página um elemento aonde você quer criar o aviso:

<span id="error_capslock">Caps Lock is ON.</span>

Adicione o CSS:

#error_capslock {
	border: 1px solid #FFFF66;
	background-color: #FFFFCC;
	display: inline-block;
	margin-left: 0px;
	padding: 3px;
	display: none;
}

E por fim o javascript:

$(function () {
   var isShiftPressed = false;
   var isCapsOn = null;
   $("#Password").bind("keydown", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
      isShiftPressed = true;
   }
   });
   $("#Password").bind("keyup", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
         isShiftPressed = false;
      }
      if (keyCode == 20) {
         if (isCapsOn == true) {
             isCapsOn = false;
             $("#error_capslock").hide();
         } else if (isCapsOn == false) {
             isCapsOn = true;
             $("#error_capslock").show();
         }
      }
      });
      $("#Password").bind("keypress", function (e) {
          var keyCode = e.keyCode ? e.keyCode : e.which;
          if (keyCode >= 65 && keyCode <= 90 
&& !isShiftPressed) {
             isCapsOn = true;
             $("#error_capslock").show();
          } else {
         	$("#error_capslock").hide();
         }
         });
   });

Não podemos esquecer de colocar a chamada ao jquery no inicio da página ok? pode ser desta forma:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.8.3/jquery.min.js"></script>

Bem é isso ae!!

Abraços.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *