 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Botones, imágenes y eventos
Para que los botones de imagen no ignoren los eventos de teclado, vamos a utilizar una función Javascript.
09/9/02 - Según lo visto hasta ahora, el botón más compatible es el formado por una
imagen simple, al verse igual en todos los navegadores. Sin embargo, teníamos el
problema de que este tipo de botón ignora los eventos de teclado, por lo que no
envía los datos al pulsar el usuario la tecla Enter.
Una solución a este problema es capturar dicho evento, es decir, la pulsación del usuario de la tecla Enter, ya que si lo conseguimos podremos llamar a una función JavaScript que nos envíe el formulario. El código necesario para ello es el que sigue, donde podemos apreciar que Internet Explorer y Netscape Navigator tienen una forma diferente de capturar los eventos, y que usamos el identificador de tecla 13, que es el que corresponde a Enter (podemos usar la tecla o teclas que necesitemos):
|
<html> <head> <title>HTMLWeb. WebScript. Diseño. Botones con estilo.</title> <style type="text/css"> .enlace{cursor:default;} </style> <script language="JavaScript" type="text/javascript"> /** * funcion demo del evento onclick en la tabla */ function envia() { document.forms[0].submit(); } /** * funcion de captura de pulsación de tecla en 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://www.yahoo.es" target="_blank" method="post"> <input type="text" name="prueba"> </form> <a class="enlace" href="#" onclick="document.forms.form1.submit();return false"><img src="images/boton.gif" width="85" height="24" border="0" alt="enviar"></a> </div> </body> </html> |
Cuyo resultado es el siguiente:
Con esto hemos conseguido el objetivo buscado: un botón cross-browser (compatible con los diferentes navegadores), que además soporte los eventos característicos de este tipo de elementos de formulario.
El inconveniente es que los textos que aparecen en la imagen deben ser fijos, salvo que definamos diferentes imágenes para los posibles casos. En caso de páginas que deban soportar multi-idioma, esto se convierte en un obstáculo importante. Vamos a ver cómo podemos hayar una solución a esto.
+ 2 categorias relacionadas
+ 2 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Luciano Moreno*
Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en Scripts en Javascript
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
