CriarWeb.com > Manuais > Botões com estilo

Botões, imagens e eventos

Para que os botões de imagem não ignorem os eventos de teclado, vamos utilizar uma função Javascript.

Por Luciano Moreno

Publicado em: 07/9/06

Valorize este artigo:

Segundo o que foi visto até agora, o botão mais compatível é o formado por uma imagem simples, ao ser visto igual em todos os navegadores. Entretanto, tínhamos o problema de que este tipo de botão ignora os eventos de teclado, portanto não envia os dados quando o usuário clica a tecla Enter.

Uma solução a este problema é capturar tal evento, ou seja, o clique do usuário da tecla Enter, já que se o conseguimos poderemos chamar a uma função JavaScript que nos envie o formulário. O código necessário para isso é o que segue, onde podemos apreciar que Internet Explorer e Netscape Navigator têm uma forma diferente de capturar os eventos, e que usamos o identificador de tecla 13, que é o que corresponde a Enter (podemos usar a tecla ou teclas que necessitarmos):

<html>
<head>
<title>HTMLWeb. WebScript. Design. Botoes com estilo.</title>
<style type="text/css">
    .link{cursor:default;}
</style>
<script language="JavaScript" type="text/javascript">
    /**
    * funcao demo do evento onclick na tabela
    */
    function envia()
    {
      document.forms[0].submit();
    }
    /**
    * funcao de captura de clique de tecla na Internet Explorer
    */
    var tecla;
    function capturaTecla(e)
    {
        if(document.all)
            tecla=event.keyCode;
        else
        {
            tecla=e.which;
        }
     if(tecla==13)
        {
            document.forms[0].submit();
        }
    }
    document.onkeydown = capturaTecla;
</script>
</head>
<body>
<div align="center">
<form name="form1" action="http://br.yahoo.com" target="_blank" method="post">
    <input type="text" name="prova">
</form>
<a class="link" href="#" onclick="document.forms.form1.submit();return false"><img src="images/botao.gif" width="85" height="24" border="0" alt="enviar"></a>
</div>
</body>
</html>

Cujo resultado é o seguinte:

Com isto conseguimos o objetivo buscado: um botão cross-browser (compatível com os diferentes navegadores), que ademais suporte os eventos característicos deste tipo de elementos de formulário.

O inconveniente é que os textos que aparecem na imagem devem ser fixos, salvo que definamos diferentes imagens para os possíveis casos. No caso de páginas que devam suportar multi-idioma, isto se converte em um obstáculo importante. Veremos como podemos encontrar uma solução para isto.

Acrescentar um comentário ao artigo

Manual: Botões com estilo

Botões, CSS e tabelas

Botões, tabelas e eventos