Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

anselmogomes

[Resolvido] Como obter os códigos das teclas do teclado (Keycodes

By anselmogomes, in Javascript

Recommended Posts

anselmogomes    0

anselmogomes
Posted

Este é meu primeiro tutorial no Imasters e é uma variação de um tutorial já apresentado antes no Fórum.

 

O objetivo do tutorial é oferecer uma forma conveniente de capturar os códigos ASCII de teclas do teclado.

 

O código abaixo gera um textarea onde o progrmador pode digitar qualquer coisa, exceto teclas de controle (como ctrl,shift, alt, tab e F1 a F12, etc.) e uma caixa de texto abaixo do textarea onde aparece o código ASCII da tecla digitada.

 

 

<!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>Verificador de keycodes (Códigos das teclas do teclado)</title>
<!--

- Script original de http://forum.imasters.com.br/index.php?showtopic=217375
- Postado no Fórum  01/03/2007 - 14:03 por 'Periscuelo'
- Alteração de interface em 16/05/2009 por Anselmo G. Santos (http://anselmogomes.blogspot.com)

-->
<script language="javascript">
<!--

function exemplo()
{

var tecla = window.event.keyCode;
window.status = "Você pressionou a tecla: " + String.fromCharCode(tecla);
document.getElementById('codigoDaTecla').value=tecla;

}


//-->
</script>
</head>
<body>
<br />
<center>
<h4>Tabela de Keycodes - Códigos ASCII das Teclas do Teclado do Computador</h4>
<label style="line-height:100px; vertical-align:middle;">Digite alguma coisa na caixa para ver o código da tecla:</label><br>
<textarea onKeyPress="this.value='';return exemplo();" id="texto_tecla" style="height:100px; width:300px;"></textarea>
<br /><br />
<input type="text" id="codigoDaTecla" style="width:300px;" value="O código da tecla aparecerá aqui">
</center>
</body>
</html>

 

Pra que serve isso?

 

Imagine que você precise que o texto que o visitante de seu site digitar nos textareas apareça com a mesma formatação que ele digitar quando for exibido, com os espaços e as tabulações, mas você não pode usar um editor avançado de texto no campo, como o Tiny MCE.

 

Muitas vezes ocorre de as tabulações e os espaços simplesmente desaparecerem quando o texto do banco de dados é exibido. Para resolver isso, você pode capturar o enter do visitante e transformar num <br />, por exemplo.

 

Veja o código abaixo, ele faz isso:

 

 

<textarea name="nomeDoCampo" id="idDoCampo" cols="65" rows="8" onKeyDown="if (event.keyCode==13) this.value=this.value+'<br />';">
</textarea>

 

Espero ter ajudado algum colega que esteja procurando por isso.

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept