3 Visitantes Online
Redes Sociais

JavaScript / jQuery

Você está aqui: Home » JavaScript / jQuery » Interagindo com o teclado dinâmicamente - Parte II

Interagindo com o teclado dinâmicamente - Parte II

Postado em 14/06/2006 | 7896 leituras

Salve Galera!
Esta é a segunda parte da matéria sobre "Como Interagir com o teclado dinâmicamente".
Nesta parte da matéria, vamos simular um teclado virtual, inclusive abordando uma parte sobre efeitos reais. Este vai ser um teclado simples, abordando apenas o alfabeto, caso queiram implementar sintam-se a vontade. ;)
Com mais esta matéria, vc's vão adquirir conhecimento, para poderem construir diversas coisas interessantes e de bastante entretenimento com o usuário.

Resolvi postar o Source da página inteira e o script incluido nela.. e naum td separado... Lembrando q a eXplicação deste código, segue-se em linas de comentário ( // );

Let's Go!:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
font:80% Verdana;
background-color:#CCCCCC;
cursor:crosshair;
}
button {
width:30px;
height:30px;
background-color:#000000;
color:white;
font-weight:bold;
}
</style>
</head>

<body>
<p align="center" style="font-family:'Trebuchet MS'; color:#0066CC; font-size:32px;">Teclado</p>
<p align="center" style="font-family:'Trebuchet MS'; color:#0066CC; font-size:32px;"> </p>
<p align="center">
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
<br />
   
<button>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
<button>Ç</button>
<br />
   
   
<button>Z</button>
<button>X</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
<button><</button>
<button>></button>
<button>;</button>
</p>
<p>
<script type="text/javascript">
<!--

//Define as váriaveis a serem usadas.
var letra, tecla, acertos, erros;
var elems = document.getElementsByTagName("BUTTON");
//A propriedade getElementByTagName(), retorna todos os elementos (no dccumento) que correspondem a determinada tag citada como parâmetro, no nosso caso "BUTTON";function down()
{

tecla = window.event.keyCode; // Variavel pega o código da tecla pressionada, como estudamos na matéria passada.

if(tecla == 186)
{
  letra = "Ç";
}
else
{
  letra = String.fromCharCode(tecla);
}

//Laço para setar as configurações do botão quando pressionado.
for(i = 0; i < elems.length; i++)
{
  if(elems[i].value == letra)
  {
   elems[i].style.borderStyle = 'inset'; //Muda tipo da borda.
   elems[i].style.backgroundColor = '#333333'; //Muda cor de fuNdo.
  }
}
}

function up()
{
//Laço para setar as configurações do botão quando solto
for(i = 0; i < elems.length; i++)
{
elems[i].style.borderStyle = 'outset'; //Muda tipo da borda.
elems[i].style.backgroundColor = '000000'; //Muda cor de fuNdo.
}
}

document.onkeydown = down;
document.onkeyup = up;

//-->
</script>
</p>
</body>
</html>

O resultado fianl é este: http://www.domusinfo.com.br/heitor/teclado.htm

Vlw pessoal! Espero que tenham gostado desta matéria e que tirem mto proveito!
Em caso que vc's queriam pedir alguma matéria, ou que falem sobre determinado assunto, sintam-se a vontade para se expressar, mandem e-mails!
Qualquer dúvida em relação mandem e-mail: heitoralthmann@gmail.com, ou acesse nosso fórum: http://www.sosdesigners.com/forum.

Até a Próxima! =D

Um grande Abraço!

Sobre o Colunista:

Heitor Althmann

Profissão: Web Developer

Descrição: HTML - CSS - Java Script - PhothoShop - DreamWeaver - Flash

Bem vindo ao SOS Designers

Empresas

Usuarios

Área de Empresas | Vagas

Área de Usuarios | Curriculos

JavaScript / jQuery

Interagindo com o teclado dinâmicamente - Parte II

Heitor Althmann

Outros artigos postados por este autor

Artigos relacionados sobre JavaScript / jQuery