# Rafael.Barbolo

O evento “onkeypress” ou, traduzindo, “tecla pressionada” serve para permitir que o usuário execute ações com seu teclado.

Não são todos os elementos xhtml que podem receber eventos onkeypress. O elemento mais comum que recebe esse evento é o <input type=”text”>. Como um dos elementos mais usados em xhtml é o <div> (serve para criar um bloco dentro do html) e não suporta o evento onkeypress, fiz uma gambiarra (”procedimento técnico não documentado”) que faz o <div> receber o evento.

A idéia é colocar um campo de input dentro do div que recebe o evento onkeypress e escondê-lo. Para escondê-lo, basta posicioná-lo bem longe da página. O div deve ter eventos que coloque ou tire foco do input.

Para que o esquema funcione, seu bloco de código deve ser parecido com o seguinte:

<div onclick=”divClicado()” style=”background-color:red; width:100px; height: 100px;”>
<form><input id=”div_keypress” type=”text” style=”position:absolute; left:-999999px”></form>
</div>
<script>
document.onmousedown = clickFora;
document.getElementById(”div_keypress”).onkeypress = teclaPressionada;
function divClicado() {
document.getElementById(’div_keypress’).focus();
}
function clickFora() {
document.onmousedown=document.getElementById(’div_keypress’).blur();
}
function teclaPressionada(event) {
alert(String.fromCharCode(event.which));
}
</script>

Clique aqui para ver um exemplo.

– ATUALIZADO –

O William Taniguchiin me ajudou com o problema do <div> e encontrou um “work around” para o div receber eventos no firefox.

http://n2.nabble.com/key-events-not-firing-on-div-in-FF–td663136.html

para receber eventos, no firefox deve ser setado via javascript tabIndex = -1.