Teclado Virtual com submit automático
Oi gente!
Eu seei, eu sei que teclado virtual não é a melhor coisa do mundo, mas preciso fechar esse.
Então, tenho esse teclado que deve ter no máximo 3 dígitos no campo da senha e, ao completar os 3 dígitos deve abrir uma nova página.
Não estou conseguindo bloquear a inserção de novos dígitos depois do 3º e não estou conseguindo fazer esse submit automático...
Alguma sugestão?
Segue o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Obrigado por utilizar o Caixa Automático do HSBC.</title>
<script language="javascript">
function Senha(valor){
//Objeto de acesso ao campo visor
var visor = document.getElementById("visor");
//Objeto de acesso ao campo hidden senha
var senha = document.getElementById("senha");
//Acrescenta o numero digitado ao visor e a senha
visor.value += '*';
senha.value += '*';
}
function Valida(){
var senha = document.getElementById("senha");
//Valida algum valor foi digitado
if(!senha.value)
{
alert("Utilize o teclado virtual para preencher a senha !");
return false;
}//valida o tamanho da senha, pode ser alterada ou excluida
if(senha.value.length < 3)
{
alert("A senha deve possuir 3 dígitos !");
return false;
}
if(senha.value.length > 3){
event.keyCode = null;
return false;
}
}
function envia(){
if(senha.value.length == 3)
{
form1.submit();
return true;
}
}
</Script>
</head>
<body>
<div id="teclas">
<form name="form1" action="dv03.html" method="post" onsubmit="return Valida();" onkeydown="envia();">
<!-- Como deixamos o campo password cdesabilitado para digitação ele não envia as informações
então utilizamos um campo hidden para postar a senha digitada e o password somente para
o usuario visualizar quantos numeros ja digitou -->
<input type="password" name="visor" id="visor" style="font-size:14px; text-align:center" maxlength="3"/>
<input type="hidden" name="senha" id="senha" maxlength="3" />
<input type="button" style="background-color:#FFF; font-size:14px" value="L H I J" onclick="Senha(this.value)" id="campo1"/>
<input type="button" style="background-color:#FFF; font-size:14px" value="P G R X" onclick="Senha(this.value)" id="campo2"/></td>
<input type="button" style="background-color:#FFF; font-size:14px" value="E M W K" onclick="Senha(this.value)" id="campo3"/>
<input type="button" style="background-color:#FFF; font-size:14px" value="Q F O A" onclick="Senha(this.value)" id="campo4"/>
<input type="button" style="background-color:#FFF; font-size:14px" value="B Z Y N" onclick="Senha(this.value)" id="campo5"/></td>
<input type="button" style="background-color:#FFF; font-size:14px" value="T C U S" onclick="Senha(this.value)" id="campo6"/>
<input type="button" style="background-color:#FFF; font-size:14px" value="V D I L" onclick="Senha(this.value)" id="campo7"/>
<input type="button" style="background-color:#FFF; font-size:14px" value="N U E C" onclick="Senha(this.value)" id="campo8"/>
</form>
</div>
</body>Obrigada! =)
Discussão (5)
Carregando comentários...