# 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.

Hoje, na Poli, meu amigo sabichão Roberto Sonnino estava dando dicas de CSS que é algo que eu conheço e uso com pouco domínio. Entre elas, estava o exemplo de como utilizar links em imagens sem perder seus conteúdos (textos).

É importante que ao colocar link em uma imagem você especifique em texto o que este link representa. É através dele que Sistemas de Busca como Google, Yahoo, LiveSearch entre outros vão avaliar a relevância da sua página e decidir se devem mostrá-la com maior prioridade em determinadas buscas.

Para exemplificar a técnica, imagine que você tenha um logo em seu site que possua link. O modo mais comum de se encontrar logos linkados na internet é com o seguinte código no html:

<a href=”http:www.enderecodestino.com”>

<img src=”http://www.enderecodologo.x.y/logo.gif”>

</a>

Para aplicarmos a técnica neste logo, devemos primeiro criar um header que definirá o que a imagem representa (ao invés do header, poderia também ter um div ou alguma tag específica). No HTML fazemos apenas algo como:
<a href=”http:www.enderecodestino.com”>

<h1>Conteúdo da Imagem</h1>

</a>

Agora no arquivo .css que define a estrutura da página, colocamos um código parecido com o seguinte:

h1 {

background: url(http://www.enderecodologo.x.y/logo.png);

text-indent: -10000px;

}

Para visualizar um exemplo de uso desta técnica, entre no link: Exemplo de Imagem com Link

Se você utiliza o firefox, você pode clicar em Exibir, Estilos da Página, Sem Estilos. Assim você poderá visualizar o que é visto por um sistema de busca padrão: apenas texto.