Teclado Virtual numérico

JonasFloripa · Fevereiro 6, 2012

Olá galera, estou a procura de uma teclado virtual numérico igual ao do site da vivo. O link segue abaixo.

http://www.vivoblog.com.br/meu-vivo-novo-t...do-virtual.html

Já procurei em vários lugares mas não achei

Abraço

lobismano · Fevereiro 6, 2012

amigo. é mais facil fazer um.

fiz esse como exemplo. quem sabe pode te ajudar.

ah. o campo onde estão aparecendo os valores das teclas tem que ser do tipo hidden. neste caso deixei do tipo text só para que possamos ver o resultado.

agora basta você verificar se a senha em cada par de números está correta com o banco, tipo:

senha no banco 38910

3-7;4-8;5-9;1-2;0-6;

<html>
<body>
<head>
<script>
function randomize()
{
a=0;
text = "";
texto = new Array(10);

while(a<10)
{
var randomnumber = Math.floor(Math.random()*10);
    if(texto[randomnumber] != randomnumber)
    {
    texto[randomnumber] = randomnumber;
    a++;
    text = text + randomnumber + ';';
    }
}

array_texto = text.split(';');

document.geral.um.value = array_texto[0] +'-'+ array_texto[1];
document.geral.dois.value = array_texto[2] +'-'+ array_texto[3];
document.geral.tres.value = array_texto[4] +'-'+ array_texto[5];
document.geral.quatro.value = array_texto[6] +'-'+ array_texto[7];
document.geral.cinco.value = array_texto[8] +'-'+ array_texto[9];
}

function preenche(valor)
{
var senha = document.getElementById('senha');
var senhahidden = document.getElementById('senhahidden');

    if(senha.value.length <= 4 && senhahidden.value.length <= 19)
    {
    senhahidden.value = senhahidden.value + valor + ';';
    senha.value = senha.value + '*';
    }
}
</script>
<style>
#botao {
width:40px;
height:40px;
}
#senha, #senhahidden {
width:230px;
height:40px;
}
</style>
</head>
<body onload="randomize();">
<form name="geral" action="#" method="post">
<div id="geral">
<input id="botao" type="button" name="um" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="dois" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="tres" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="quatro" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="cinco" value="" onclick="preenche(this.value)"><p>
<input id="senha" type="text" name="senha" value="" maxlength="5">
<input id="senhahidden" type="text" name="senhahidden" value="" maxlength="20">
</div>
</body>
</html>

espero ter ajudado.

JonasFloripa · Fevereiro 7, 2012

Olá amigo..

Perfeito, é isso mesmo que eu quero...Muito obrigado.

Só não ficou muito claro pra mim a parte de verificar no banco, se a senha no banco 38910, como fazer para que ele compare com par, sendo que no banco não terá o par 3-7;4-8;5-9;1-2;0-6;

A dúvida surgiu porque não estou vendo se é só um número ou o par no campo senha.

Não sei se fui claro, mas fiquei imaginando como fazer, usando vetor, string.

Muito pela ajuda

Editado Fevereiro 7, 2012 por JonasFloripa

lobismano · Fevereiro 7, 2012

beleza. que bom que era isso mesmo.

depende muito da tecnologia que você vai usar, mas vai um exemplo com proprio java script:

1 - recupere a senha do db e depois divida a mesma em um array.

senha_do_banco = "12345"; //valor recuperado do banco de dados

array_senha_do_banco = senha_do_banco.split('');

2 - divida os pares digitados também em um array.

var senha = document.getElementById('senhahidden').value;

array_senha = senha.split(';');

3 - verifique se o valor em cada posição da senha do banco contém parte de cada senha do campo "hidden" com o indexOf.

pos1 = array_senha[0].indexOf(array_senha_do_banco[0]);

pos2 = array_senha[1].indexOf(array_senha_do_banco[1]);

pos3 = array_senha[2].indexOf(array_senha_do_banco[2]);

pos4 = array_senha[3].indexOf(array_senha_do_banco[3]);

pos5 = array_senha[4].indexOf(array_senha_do_banco[4]);

if(pos1 >= 0 && pos2 >= 0 && pos3 >= 0 && pos4 >=0 && pos5 >=0)

{

alert('Senha Correta');

}

else

{

alert('Senha Incorreta');

}

segue o código alterado com a validação.

<html>
<body>
<head>
<script>
function randomize()
{
a=0;
text = "";
texto = new Array(10);

while(a<10)
{
var randomnumber = Math.floor(Math.random()*10);
    if(texto[randomnumber] != randomnumber)
    {
    texto[randomnumber] = randomnumber;
    a++;
    text = text + randomnumber + ';';
    }
}

array_texto = text.split(';');

document.geral.um.value = array_texto[0] +'-'+ array_texto[1];
document.geral.dois.value = array_texto[2] +'-'+ array_texto[3];
document.geral.tres.value = array_texto[4] +'-'+ array_texto[5];
document.geral.quatro.value = array_texto[6] +'-'+ array_texto[7];
document.geral.cinco.value = array_texto[8] +'-'+ array_texto[9];
}

function preenche(valor)
{
var senha = document.getElementById('senha');
var senhahidden = document.getElementById('senhahidden');

    if(senha.value.length <= 4 && senhahidden.value.length <= 19)
    {
    senhahidden.value = senhahidden.value + valor + ';';
    senha.value = senha.value + '*';
    }
}

function valida_senha(){

var senha = document.getElementById('senhahidden').value;

senha_do_banco = "12345"; [b][color="#FF0000"]//ATENÇÃO: aqui vai o valor recuperado do banco de dados[/color][/b]

array_senha_do_banco = senha_do_banco.split('');
array_senha = senha.split(';');

pos1 = array_senha[0].indexOf(array_senha_do_banco[0]);
pos2 = array_senha[1].indexOf(array_senha_do_banco[1]);
pos3 = array_senha[2].indexOf(array_senha_do_banco[2]);
pos4 = array_senha[3].indexOf(array_senha_do_banco[3]);
pos5 = array_senha[4].indexOf(array_senha_do_banco[4]);

if(pos1 >= 0 && pos2 >= 0 && pos3 >= 0 && pos4 >=0 && pos5 >=0)
{
alert('Senha Correta');
}
else
{
alert('Senha Incorreta');
}
}

</script>
<style>
#botao {
width:40px;
height:40px;
}
#senha, #senhahidden {
width:230px;
height:40px;
}
</style>
</head>
<body onload="randomize();">
<form name="geral" action="#" method="post">
<div id="geral">
<input id="botao" type="button" name="um" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="dois" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="tres" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="quatro" value="" onclick="preenche(this.value)">&nbsp;
<input id="botao" type="button" name="cinco" value="" onclick="preenche(this.value)"><p>
<input id="senha" type="text" name="senha" value="" maxlength="5"><br>
<input id="senhahidden" type="text" name="senhahidden" value="" maxlength="20"><p>
<input type="button" name="testa" value="Verifica" onclick="valida_senha()"><p>
</div>
</body>
</html>

At.

Entrar

Teclado Virtual numérico

Pergunta

JonasFloripa

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lobismano

Link para o comentário

Compartilhar em outros sites

JonasFloripa

Link para o comentário

Compartilhar em outros sites

lobismano

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades