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:
[html]
<span id="error_capslock">Caps Lock is ON.</span>
[/html]
Adicione o CSS:
[css]
#error_capslock {
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 0px;
padding: 3px;
display: none;
}
[/css]
E por fim o javascript:
[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();
}
});
});
[/javascript]
Não podemos esquecer de colocar a chamada ao jquery no inicio da página ok? pode ser desta forma:
[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.8.3/jquery.min.js"></script>
[/html]
Bem é isso ae!!
Abraços.