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