Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meela

Teclado Virtual com submit automático

Por , em Javascript

Recommended Posts

Meela    0

Meela
Postado

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! =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Então, eu andei pesquisando mais e vi que dá pra fazer uma adaptação do script que muda de campo automaticamente.

Ou seja, eu posso determinar que quando length for igual a maxlength, deve ocorrer uma ação.

Acontece que não só não consigo fazer funcionar como o maxlength não é respeitado (ele seria num valor de 3, mas posso colocar quantos quiser).

 

Segue o código alterado.

 

Javascript

<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 == senha.getAttribute('maxlength'))
{
	form1.submit();
	return true;
}
}
</Script>

 

Formulário HTML

<form name="form1" action="dv03.html" method="post" onsubmit="return Valida();" >
<input type="password" name="visor" id="visor" style="font-size:14px; text-align:center" maxlength="3" onkeyup="envia();"/>
<input type="hidden" name="senha" id="senha" maxlength="3" onkeyup="envia();" />

<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Pelo que eu entendi, você quer impedir o usuário de digitar mais que 3 caracteres, é isso?

Se for isso, creio que assim funcione:

function Senha(valor){
var visor = document.getElementById('visor');
var valor = visor.value;
var maxlen = visor.getAttribute('maxlength');
if(visor.value.length >= maxlen){
visor.value = visor.value.substring(0,maxlen);
return false;
}
//..... continua a função aqui
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Sim, Rick, esse era um dos problemas. O que eu preciso mesmo (mais até que impedir a digitação de mais caracteres) é fazer com que ao completar o número máx. de caracteres o formulário seja enviado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Ah sim...

Nesse caso, altere assim:

 

function Senha(valor){
var visor = document.getElementById('visor');
var valor = visor.value;
var maxlen = visor.getAttribute('maxlength');
if(visor.value.length >= maxlen){
visor.value = visor.value.substring(0,maxlen);
document.getElementById('ID DO FORM').submit();
return false;
}
//..... continua a função aqui
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Hmmm quase lá!

A função funcionou, mas com um porém:

eu preciso dar um clique a mais em algum botão do teclado pra ativar.

Originalmente meu form puxava o javascript com "onSubmit: return função();"

fui tentando com todos os eventos e o que quase funcionou como eu preciso foi o onKeyDown. O problema é que neste modo, quando clico uma vez em um botão ele preenche dois caracteres de uma vez...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito