Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Olá pessoal, boa tarde.

Neste artigo mostrarei como criar um teclado virtual utilizando JQuery, para que seus usuários digitem uma senha, por exemplo. Muito dificilmente o seu usuário passará por problemas de segurança.

Por que esse teclado virtual é seguro?

• Porque o usuário não necessita digitar a senha através do teclado, evitando assim os keyloggers.
• Ao colocar o mouse sobre a "tecla", o conteúdo desaparece. Isso evita um tipo de spyware que "tira uma foto" da tela a cada clique do mouse.
• A cada clique nas "teclas", a ordem dos números mudam, dificultando ainda mais.

Sobre JQuery: http://jquery.com/

Você pode ter uma visão antecipada do resultado final aqui.

Desenvolvimento

Código HTML

Não abordarei o código HTML por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o código do nosso exemplo aqui.

Código CSS

Não abordarei o código CSS por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o código do arquivo CSS aqui.

Código Javascript

O nosso código javascript é bem simples.

Você pode ver o conteúdo do arquivo javascript aqui.

Vamos analisar o nosso código linha por linha. Para facilitar, acompanhe a imagem abaixo.

Linha 1: Abre a função que será executada quando o documento estiver pronto, ou seja, quando a nossa página estiver carregada. Você pode ter visto isso de forma semelhante com

Existem também outras formas de fazer, utilizando adicionadores de eventos. Precisamos fazer com que o código seja executado somente após o carregamento completo da página, para garantirmos que os elementos que estão sendo referenciados existam.

Linha 2: Chama a função "sorteio", que altera os números de cada tecla. Mais à frente explicarei a função sorteio. Atente que no código HTML, o conteúdo dos links é um "x".

Linha 3: Adiciona o código das linhas 4 e 5 ao evento "click" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Veja a estrutura no código HTML.

Linha 4: Adiciona ao conteúdo do elemento "passwd" o número que está no link. Perceba que a função "val" do elemento input, cujo id é "passwd" tem duas formas de utilização: se você passar um atributo, ele adiciona o valor passado ao "value" do input. Se não passar atributo, a função retorna o "value" do input. Interessante, não?

Linha 5: Após o clique no link, a função "sorteio" é chamada novamente para mudar os números em cada tecla.

Linha 7: Adiciona o código da linha 8 ao evento "mouseover" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Esse evento é acionado sempre que o mouse está sobre (over) os links.

Linha 8: Atribui a classe "esconde" aos links. Essa classe torna a cor da letra branca (a mesma cor do fundo do link).

Linha 10: Adiciona o código da linha 11 ao evento "mouseout" dos elementos "a" (links) que estão dentro do elemento cujo id é "teclas". Esse evento é acionado sempre que o mouse sai de cima dos links.

Linha 11: Atribui a classe "mostra" aos links. Essa classe torna a cor da letra negra, como originalmente.

Linha 14: Declaração da função "sorteio".

Linha 15: A função "random" do objeto "Math" faz um sorteio aleatório e retorna um número entre 0 e 1, inclusive. Esse valor retornado é multiplicado por 10 e atribuido á variável "sort".

Linha 16: Essa linha mostra uma forma contracta da declaração "if" e significa: se sort é igual a 10, sort será igual a 9. Se não, sort será igual a sort mesmo. Isso é necessário porque temos 10 links (de 0 a 9, inclusive).

Linha 17: Transforma o conteúdo de "sort" de inteiro para string. Isso será necessário pois atribuiremos o valor de "sort" ao texto dos links, na linha 20.

Linha 20: Atribui o valor da variável "sort" ao texto do link da posição "i". O primeiro link do primeiro "li" é o link 0. O último é o link 9.

Linha 21: Incrementa a variável "sort" em 1. Incrementar é o mesmo que somar. Assim, sort++ é o mesmo que sort = sort + 1.

Linha 22: Testa se o valor da variável "sort" é maior do que 9. Se for, reinicia a contagem. Se não, permanece.

Linha 23: Transforma o conteúdo de "sort" em string novamente, pelo mesmo motivo da linha 17.

Conclusão

Como em outros artigos, a intenção não é que copiem e colem em seus projetos. Caso mudem o HTML, muito provavelmente deverão fazer ajustes no javascript.

Aguardo os comentários. Abraços a todos!