Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Javascript

Feed da seção Javascript

Newsletter de Javascript


Quarta-feira, 10/10/2007 - 08:50 - Por Thiago Ferreira
Seções relacionadas:

Teclado Virtual com JQuery

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

window.onload = function() {

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!

Todos os artigos de Thiago Ferreira

5 comentários publicados

  • 1. Excêlente artigo

    Quinta-feira, 11/10/2007, por Paulo Sérgio Carmo

    Interessante, útil e bem simples estes código, muito bom mesmo.

    Responder comentário

  • 2. Perfeito

    Quinta-feira, 11/10/2007, por Ricardo Floriano da Silva

    Muito bom este artigo, pego os pontos mais serios e com criatividade fez com que esse com teclado nao seja vuneravel aos spywares atuais e dificilmente sera hackeado pelos proximos.

    Responder comentário

  • 3. Como colocar no formato PASSWD?

    Quarta-feira, 31/10/2007, por felipe melo

    Thiago, não consegui mudar o formato do texto para PASSWD pelo formato do INPUT no campo HTML. Poderia informar como posso fazer, para ocultar os números no campo[***]

    Responder comentário

  • 4. Resposta ao Felipe Melo

    Quarta-feira, 31/10/2007, por Thiago Ferreira

    Felipe, basta trocar de type="text" para type="password"

    Responder comentário

  • 5. Muito bom!

    Sexta-feira, 02/11/2007, por Junio Albino

    No site do bb.com.br o teclado virtual ainda tem a opção de dar um contraste menor nos números, acho isso fundamental praquele colega chato q não sai de perto, rsrs.

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Thiago Ferreira mais conhecido como tmferreira (tmferreira@bol.com.br) e é formado em Análise de Sistemas pela Universidade Salgado de Oliveira. Trabalha desde 2005 com desenvolvimento WEB, na FatorClick (http://www.fatorclick.com.br). Também mantém um blog (http://www.tmferreira.com.br/blog/) sobre desenvolvimento WEB, onde escreve sobre PHP, Javascript, Banco de Dados e Webstandards.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.