Os eventos de teclado, em princípio, são três, como vimos no artigo Manipuladores de eventos em jQuery, keydown, keypress e keyup. Realmente não atuam por separado, senão que se produz uma combinação deles à medida que se vai pressionando e soltando as teclas, como pode ser deduzido das explicações do mencionado artigo.
Se pressionamos de modo prolongado uma tecla este esquema varia, pois se produz um keydown e em seguida um keypress. Enquanto se mantém apertada a tecla em loop se vão produzindo eventos keydown e keypress, repetidas vezes até que finalmente se solta a tecla e se produz um keyup.
No caso das teclas CTRL, Maiúsculas ou ALT, se produzem múltiplos keydown até que se solta a tecla e se produz um keyup. Ou seja, ao apertar uma destas teclas não se produz o evento keypress.
Trata-se de fazer uma função que detecte qualquer evento de teclado, mostre o tipo de evento que ocorreu e o mostre na página. Assim poderemos ver os eventos que se produzem, sejam quais forem, e em que ordem.
Primeiro poderíamos definir a função que vai processar os eventos:
function operaEvento(evento){
$("#oescrito").html($("#oescrito").html() + evento.type + ": " + evento.which + ", ")
}
Esta função recebe o evento e escreve em uma camada o tipo de evento, que se obtém com a propriedade type do objeto evento, e em seguida um código da tecla pressionada, que se consegue com a propriedade which do objeto evento.
Agora podemos fazer que qualquer evento de teclado invoque esta função com o código:
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
Como associamos os eventos ao objeto document de Javascript, estes eventos serão colocados em funcionamento cada vez que se pressione uma tecla, independentemente de onde esteja o foco da aplicação (ou onde o usuário esteja escrevendo).
Isto pode ser visto em funcionamento em uma página à parte.
Creio que vale a pena apresentar o código completo do exemplo anterior:
<html>
<head>
<title>Trabalhando com eventos de teclado em jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
function operaEvento(evento){
$("oescrito").html($("#oescrito").html() + evento.type + ": " + evento.which + ", ")
}
$(document).ready(function(){
$(document).keypress(operaEvento);
$(document).keydown(operaEvento);
$(document).keyup(operaEvento);
})
</script>
</head>
<body>
<h1>Eventos de teclado em jQuery</h1>
<div id="oescrito"></div>
</body>
</html>
Temos um textarea e escrevendo algo nele, mostraremos a tecla pressionada em uma camada, independente do textarea. Este será o código HTML que necessitaremos para o exemplo:
<form>
<textarea cols=300 rows=2 id="meutexto">Escreva algo aqui!</textarea>
<br>
<b>Tecla pressionada:</b>
<br>
<div id="oescrito"></div>
</form>
Agora definiremos com jQuery o evento keypress, para mostrar a tecla pressionada.
$("#meutexto").keypress(function(e){
e.preventDefault();
$("#oescrito").html(e.which + ": " + String.fromCharCode(e.which));
});
Com e.preventDefault(); fazemos com que não se escreva nada no textarea, ou seja, estamos inibindo o comportamento habitual do evento, que é escrever as teclas no textarea, que não tem muito que ver com nosso exemplo, mas é bom para ver como funciona.
Depois escrevemos na camada com id "oescrito" o código de Unicode dessa tecla e em seguida sua conversão para um caractere normal, através da função estática da classe String fromCharCode().
O código completo do exercício é o seguinte.
<html>
<head>
<title>Trabalhando com eventos de teclado em jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#meutexto").keypress(function(e){
e.preventDefault();
$("#oescrito").html(e.which + ": " + String.fromCharCode(e.which))
});
})
</script>
</head>
<body>
<h1>Eventos de teclado em jQuery</h1>
<h2>Verificar que tecla está sendo pressionada</h2>
<form>
<textarea cols=300 rows=2 id="meutexto">Escreva algo aqui!</textarea>
<br>
<b>Tecla pressionada:</b>
<br>
<div id="oescrito"></div>
</form>
</body>
</html>
Podemos ver o exemplo em funcionamento em uma página à parte.
