Java script e Ajax sem lero lero
Voltar
Checando se o Caps Lock esta ativado
A checagem se o Caps Lock esta ativado pode ser interessante de ser fazer, por exemplo, em um formulário onde o usuário tem que preencher um login e senha para acessar o sistema.
Neste caso, como a maioria dos sistemas é case-sensitive (para quem não sabe, case-sensitive (sensível ao tamanho da letra) significa, segundo a Wikipédia, que um programa ou um compilador faz a diferença entre letras maiúsculas e minúsculas), se o usuário tem o login "Jose" e a senha "Maria" e se ele estiver com o Caps Lock ativado, e for preencher seu login e senha para acessar o sistema, ele estaria digitando como login "JOSE" e como senha "MARIA", o que, consequentemente, faria com que ele não conseguisse acessar o sistema desta forma.
Que tal, então, exibir uma mensagem na página avisando ao usuário que o Caps Lock dele esta ativado?! Nós podemos estar fazendo isto utilizando a função abaixo e a "chamando" pelo evento onkeypress.
Vejamos uma página de exemplo fazendo tal checagem:
Neste caso, como a maioria dos sistemas é case-sensitive (para quem não sabe, case-sensitive (sensível ao tamanho da letra) significa, segundo a Wikipédia, que um programa ou um compilador faz a diferença entre letras maiúsculas e minúsculas), se o usuário tem o login "Jose" e a senha "Maria" e se ele estiver com o Caps Lock ativado, e for preencher seu login e senha para acessar o sistema, ele estaria digitando como login "JOSE" e como senha "MARIA", o que, consequentemente, faria com que ele não conseguisse acessar o sistema desta forma.
Que tal, então, exibir uma mensagem na página avisando ao usuário que o Caps Lock dele esta ativado?! Nós podemos estar fazendo isto utilizando a função abaixo e a "chamando" pelo evento onkeypress.
Vejamos uma página de exemplo fazendo tal checagem:
<html>
<head>
<title>Checando se o Caps Lock esta ativado</title>
<script type="text/javascript">
function checar_caps_lock(ev) {
var e = ev || window.event;
codigo_tecla = e.keyCode?e.keyCode:e.which;
tecla_shift = e.shiftKey?e.shiftKey:((codigo_tecla == 16)?true:false);
if(((codigo_tecla >= 65 && codigo_tecla <= 90) && !tecla_shift) || ((codigo_tecla >= 97 && codigo_tecla <= 122) && tecla_shift)) {
document.getElementById('aviso_caps_lock').style.visibility = 'visible';
}
else {
document.getElementById('aviso_caps_lock').style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<form>
<input name="nome_do_campo" type="text" onkeypress="checar_caps_lock(event)" />
<input name="nome_do_campo" type="password" onkeypress="checar_caps_lock(event)" />
<div id="aviso_caps_lock" style="visibility: hidden">Atenção: O Caps Lock esta ativado!</div>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
<head>
<title>Checando se o Caps Lock esta ativado</title>
<script type="text/javascript">
function checar_caps_lock(ev) {
var e = ev || window.event;
codigo_tecla = e.keyCode?e.keyCode:e.which;
tecla_shift = e.shiftKey?e.shiftKey:((codigo_tecla == 16)?true:false);
if(((codigo_tecla >= 65 && codigo_tecla <= 90) && !tecla_shift) || ((codigo_tecla >= 97 && codigo_tecla <= 122) && tecla_shift)) {
document.getElementById('aviso_caps_lock').style.visibility = 'visible';
}
else {
document.getElementById('aviso_caps_lock').style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<form>
<input name="nome_do_campo" type="text" onkeypress="checar_caps_lock(event)" />
<input name="nome_do_campo" type="password" onkeypress="checar_caps_lock(event)" />
<div id="aviso_caps_lock" style="visibility: hidden">Atenção: O Caps Lock esta ativado!</div>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
Autor/fonte do artigo: Sandro J. S. Souza (xkurt em htmlstaff.org...)
Postado 21/05/2009 15:09 por Jeison Frasson
© 2002-2012 Newsmade - Quase todos os direitos reservados.