Skip to content

Instantly share code, notes, and snippets.

@valdiney

valdiney/gist:97f0e9b938a3b31af854

Created December 1, 2014 12:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save valdiney/97f0e9b938a3b31af854 to your computer and use it in GitHub Desktop.
Save valdiney/97f0e9b938a3b31af854 to your computer and use it in GitHub Desktop.
Download ZIP
Teclado virtual numérico.
Raw
gistfile1.html
<html>
<head>
<meta charset="utf-8">
<style>
body {
font-family:arial;
}
#table_teclado_virtual {
margin-top:5px;
}
#main_login {
width:200px;
background:#f2f2f2;
height:auto;
padding:10px;
}
#table_teclado_virtual {
margin-left:50px;
}
#table_button {
margin-left:58px;
}
#table_button_corrigir_senha {
margin-left:35px;
}
#table_button_corrigir_senha button {
background:#00cc33;
border:1px solid silver;
border-radius:3px;
}
#table_button_corrigir_senha button:hover {
opacity:0.80;
color:white;
}
#legenda_main_login {
display:block;
background:#000066;
color:white;
width:200px;
padding:10px;
padding-top:3px;
padding-bottom:3px;
font-size:16px;
margin-bottom:0px;
text-align:center;
}
#entrar {
background:#000066;
color:white;
border:1px solid #9a9a9a;
}
section {
width:220px;
height:auto;
margin:auto;
border:1px solid silver;
padding:10px;
background:#f7f5f5;
}
#legenda_digitos {
font-size:11px;
opacity:0.60;
margin-top:3px;
display:block;
}
.erro {
color:#f88989;
}
</style>
</head>
<body>
<section>
<h2 id="legenda_main_login">Login seguro</h2>
<div id="main_login">
<label for="Códifo">Código</label>
<input type="text" id="codigo" maxlength="6">
<br>
<label for="input">Senha</label>
<input type="password" id="senha" disabled="disabled"><br>
<i id="legenda_digitos">Sua senha deve ter 6 digitos</i>
<table id="table_button_corrigir_senha">
<tr>
<td></td>
<td> <button id="corrigi_senha">Corrigir senha</button></td>
<td></td>
</tr>
</table>
<table id="table_teclado_virtual">
<tr>
<td><button id="um" class="button_teclado" value="1">1</button></td>
<td><button id="dois" class="button_teclado" value="2">2</button></td>
<td><button id="tres" class="button_teclado" value="3">3</button></td>
</tr>
<tr>
<td><button id="quatro" class="button_teclado" value="4">4</button></td>
<td><button id="cinco" class="button_teclado" value="5">5</button></td>
<td><button id="seis" class="button_teclado" value="6">6</button></td>
</tr>
<tr>
<td><button id="sete" class="button_teclado" value="7">7</button></td>
<td><button id="oito" class="button_teclado" value="8">8</button></td>
<td><button id="nove" class="button_teclado" value="9">9</button></td>
</tr>
<tr>
<td></td>
<td><button id="zero" class="button_teclado" value="0">0</button></td>
<td></button></td>
</tr>
</table>
<table id="table_button">
<tr>
<td></td>
<td><button type="submit" id="entrar">Entrar</button></td>
<td></td>
</tr>
</table>
</div>
</section>
</body>
<script>
window.onload = function() {
var senha = "#senha",
button = "button",
conta_digitos = "#legenda_digitos",
cor_erro = "#ff0000",
cor_senha_corrigido = "#ebebe4",
cor_legenda_digitos_correto = "#616161",
corrigi_senha = document.querySelector("#corrigi_senha");
corrigi_senha.style.display = "none",
maximo_digitos = 6;
var buttons = document.getElementsByTagName("button");
for (var cont = 0; cont < buttons.length; cont++) {
buttons[cont].onclick = function() {
document.querySelector(senha).value = document.querySelector(senha).value + this.value;
var conta_digitos_senha = setInterval( function() {
var legenda_digitos = document.querySelector(conta_digitos);
legenda_digitos.innerHTML = "Contando Digitos: " + document.querySelector(senha).value.length;
if (document.querySelector(senha).value.length > maximo_digitos) {
legenda_digitos.style.color = cor_erro;
document.querySelector(senha).style.background = cor_erro;
legenda_digitos.innerHTML = "O sistema encontrou: " + document.querySelector(senha).value.length + " Digitos";
corrigi_senha.style.display = "block";
}
}, 000);
}
} // end for..
corrigi_senha.onclick = function() {
document.querySelector(senha).style.background = cor_senha_corrigido;
document.querySelector(senha).value = "";
document.querySelector(conta_digitos).style.color = cor_legenda_digitos_correto;
corrigi_senha.style.display = "none";
document.querySelector(conta_digitos).innerHTML = "Sua senha deve ter 6 digitos";
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment