Inserindo aviso de CapsLock no login
06/03/2018Fala pessoal, nesse tutorial vou explicar como colocar um aviso de CapsLock quando o usuário digitar a senha com letra maíuscula.
Para isso utilizaremos um código simples do JQuery.
Código HTML5
Nosso código HTML5 trará um formulário simples que poderá ser estilizado via css. Além disso, faremos o link com os arquivos externos.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Colocando CapsLock no Sistema de Login</title>
<link rel="stylesheet" href="Stylesheet.min.css">
</head>
<body>
<form name="Form1" id="Form1" action="Controller.php">
<div class="CapsLock"></div>
<div class="Formulario">
<input type="text" name="Usuario" id="Usuario" placeholder="Usuário"><br>
<input type="password" name="Senha" id="Senha" placeholder="Senha"><br>
<input type="submit" value="Logar">
</div>
</form>
<script src="JQuery.js"></script>
<script src="Javascript.min.js"></script>
</body>
</html>
Código JQuery para aviso de CapsLock na Senha
//CapsLock do campo de senha
$('#Senha').on('keypress',function(e){
kc=e.keyCode?e.keyCode:e.which;
sk=e.shiftKey?e.shiftKey:((kc==16)?true:false);
if(((kc>=65 && kc <=90) && !sk)||(kc>=97 && kc <=122) && sk){
$('.CapsLock').html('CapsLock ativado!');
}else{
$('.CapsLock').html('');
}
});
Posts Relacionados
Criando uma popup com HTML5, CSS e JQuery
Na vídeo-aula de hoje aprenderemos como centralizar uma div ou popup na tela do nosso navegador ou dispositivo.
Invisible reCaptcha 3 do Google
Nesse vídeo-tutorial aprenderemos como fazer um invisible reCaptcha 3 utilizando a API do Google.
Javascript
Ensinaremos durante as aulas a codificação desta importante linguagem de programação.