Teclado Virtual numérico

JonasFloripa · February 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 · February 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 · February 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

Edited February 7, 2012 by JonasFloripa

lobismano · February 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.

Sign In

Teclado Virtual numérico

Question

JonasFloripa

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

lobismano

Link to comment

Share on other sites

JonasFloripa

Link to comment

Share on other sites

lobismano

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity