Eventos de formulario web
Eventos de ratón
Eventos de teclado
Eventos de paginaUn evento entre otras cosas puede ser: una acción programada para un formulario web, un click o movimiento de ratón, o incluso una pulsación del teclado. En el articulo vamos a ver como recoger esos eventos y programar alguna acción para ellos.
1. Eventos de formulario web
Empezamos viendo un ejemplo de código HTML en el que añadimos un controlador de eventos para el botón "Enviar formulario"
<!doctype html> <html> <head> <title>Eventos</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style type="text/css"> .form-field { clear: both; padding: 10px; width: 350px; } .form-field label { float: left; width: 150px; text-align: right; } .form-field input { float: right; width: 150px; text-align: left; } #submit { text-align: center; } </style> </head> <body> <h1>Formulario web</h1> <hr> <form action="#"> <fieldset> <legend>Informacion del usuario</legend> <div class="form-field"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> </div> <div class="form-field"> <label for="email">Direccion e-mail:</label> <input type="text" id="email" name="email"> </div> <div class="form-field"> <input id="submit" type="submit" name="submit" value="Enviar formulario"> </div> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { $("form").submit(function() { alert("El formulario web NO ha sido enviado"); return false; }); }); </script> </body> </html>La parte de la cabeza <head> es muy sencilla, hacemos referencia a jQuery mediante un script y creamos una hoja de estilo interna.
La parte del cuerpo también es muy simple, primero creamos el formulario web a base de elementos HTML y nos vamos a centrar en el script que se ha creado. Será el que controle el evento del botón "Enviar formulario".
Empezamos nuestro código jQuery a través de la función "ready()" y creamos una función anónima. Dentro creamos un selector $("form") para seleccionar el formulario web y le aplicamos la función "submit()" para controlar el evento del botón.
Una vez hecho eso, creamos otra función anónima en la que mostrará un diálogo de alerta y para terminar devolvemos "false" a la acción por defecto que utiliza la función "submit()"
La acción por defecto de este controlador de eventos es enviar el formulario a un servidor. En caso de que el formulario web fuera correcto podríamos devolver un "true". De esta manera podremos ir comprobando cada apartado del formulario web con varios condicionales, si al final nos devuelve "true" el formulario sera correcto y enviado, si por el contrario devolviera "false" podríamos indicar con diálogos de alerta donde esta el error.
Otra manera de anular la acción por defecto de este controlador de eventos es utilizar la función "preventDefault()" que simplemente nos desactivará la acción por defecto. Podríamos coger el ejemplo anterior y sustituir el <script> por este otro:
<script type="text/javascript"> $(document).ready(function() { $("form").submit(function(event) { alert("El formulario web NO ha sido enviado"); event.preventDefault(); return false; }); }); </script>
1.1 Comprobar campos vacíos de un formulario web
Antes de enviar la información de un formulario web a un servidor, podemos comprobarla y verificar si es correcta. Para ello jQuery nos proporciona una función llamada "val()" que nos permitirá recuperar el valor introducido en cada campo del formulario web.
Partiendo del ejemplo anterior podemos crear un script en el que incluya un condicional para comprobar si el campo "Nombre" esta vació o no. Vamos a cambiar el script por este otro:
<script type="text/javascript"> $(document).ready(function() { $("form").submit(function(event) { if ($("#nombre").val() == "") { alert("El nombre NO puede estar en blanco"); event.preventDefault(); return false; } else { alert("Formulario web enviado con exito"); } }); }); </script>Simplemente creamos un condicional en el que comprobamos que el campo "Nombre" esta vació o no. En el caso de estar vació se mostrara una alerta y desactivara la acción por defecto, si el valor esta en uso simplemente se mostrara otra alerta.
2. Manejar eventos de ratón
2.1 Capturar clicks de ratón
Vamos a ver otro ejemplo e iremos explicando todo. En este caso vamos a simular la compra de un coche y vamos a crear la página donde se eligen los paquetes o extras del coche. Por lo tanto va a tener una sección de "radiobuttons" para los paquetes y otra sección con "checkboxes" para los extras. Nuestro trabajo sera capturar los clicks de ratón y crear acciones para ellos. Partiremos del ejemplo anterior y sustituiremos toda la parte del cuerpo <body> de nuestro documento por esta otra:
<body> <h1>Clcik de raton</h1> <hr> <form action="#"> <fieldset> <legend>Paquetes y extras</legend> <div class="form-field"> <div>Paquete: </div> <input id="normal" type="radio" name="paquete" value="normal"> <label for="nombre">Normal</label> <input id="deportivo" type="radio" name="paquete" value="deportivo"> <label for="deportivo">Deportivo</label> <input id="personal" type="radio" name="paquete" value="personal"> <label for="personal">Personalizado</label> </div> <div class="form-field"> <div>Paquete: </div> <input type="checkbox" id="navegador" name="opcion" value="navegador"> <label for="nombre">Navegador</label> <input type="checkbox" id="llantas" name="opcion" value="llantas"> <label for="nombre">Llantas</label> <input type="checkbox" id="dvd" name="opcion" value="dvd"> <label for="nombre">DVD</label> </div> <div class="form-field"> <input type="submit" id="submit" name="submit" value="Enviar formulario"> </div> </fieldset> </form> <script type="text/javascript"> $(document).ready(function() { $("input[name='paquete']").click(function() { if ($(this).val() == "deportivo") { $("input[name='opcion']").attr("checked", true); } else { $("input[name='opcion']").attr("checked", false); } }); $("input[name='opcion']").click(function() { $("#personal").attr("checked", "checked"); }); }); </script> </body>
Si ejecutamos el código en el navegador y pulsamos el paquete deportivo, veremos como se marcan todos los extras. Si pulsamos el paquete normal se desactivaran los extras. Y si pulsamos un extra veremos como se activa el paquete personalizado. Es un ejemplo muy simple y no llega a funcionar muy bien, pero si seguimos el orden indicado podremos ver el efecto.
Destacar en el código jQuery que estamos usando selectores un poco mas complejos:
$("input[name='paquete']")
$("input[name='opcion']")Cada selector afectara a todos los elementos <input> que tengan como atributo ese nombre "name".
Para recoger los eventos del ratón (en este caso clicks) utilizamos la función "click()" de jQuery. Una vez creada la función anónima para controlar los clicks del ratón hemos creado un condicional en el que indicamos que si se pulsa el paquete deportivo active todas las casillas de los extras, si por el contrario se pulsa el paquete normal o personalizado se desactivaran todos los extras.
En la ultima parte del código recogemos los clicks de los extras, y simplemente cuando se seleccione un extra el paquete cambiara a personalizado.
2.2 Capturar movimiento del ratón
En el siguiente ejemplo vamos a crear tres áreas cuadradas que cambiaran de color cuando el ratón pase por alguna de ellas. Seguiremos cogiendo el ejemplo anterior y vamos a sustituir dos partes: la hoja de estilo interna y el cuerpo <body> del documento:
<style type="text/css"> .caja { margin: 50px; padding: 30px; width: 50px; border: 3px solid black; } .colorCaja { background-color: #abacab; } </style>
<body> <h1>Movimiento del raton</h1> <hr> <br /> <br /> <br /> <span class="caja">Caja 1</span> <span class="caja">Caja 2</span> <span class="caja">Caja 3</span> <script type="text/javascript"> $(document).ready(function() { $(".caja").hover( function () { $(this).addClass("colorCaja"); }, function () { $(this).removeClass("colorCaja"); } ); }); </script> </body>En la hoja de estilo simplemente creamos un borde para cada área y el color que se aplicará cuando el ratón este dentro de algún área.
Ya en el script jQuery creamos un selector $(".caja") por clase para seleccionar las tres áreas y le aplicamos la función "hover()" que nos permitirá enlazar uno o dos controladores para los elementos seleccionados.
En este caso hemos creado dos controladores que están separados por una coma. El primero cambiara el área de color añadiendo la clase "colorCaja" cuando el ratón este dentro de ese área. Y el segundo simplemente eliminara la clase. Utilizamos el selector $(this) para hacer referencia al área donde este situado el ratón, por lo tanto detectara en que área se encuentra el ratón y la cambiara de color.
3. Manejar eventos del teclado
3.1 Contar caracteres
Vamos a crear un ejemplo similar al mensaje de un móvil, es decir, cuando escribimos un mensaje de texto en el móvil tenemos una zona donde escribir el texto y por otro lado tenemos un contador de caracteres para saber cuanto podemos escribir. Partiendo del ejemplo anterior eliminamos la hoja de estilo interna y cambiamos el cuerpo del documento por este otro:
<body> <h1>Contar caracteres</h1> <hr> <form action="#"> <textarea rows="10" cols="20" id="sms" name="sms"></textarea> <p>Caracteres restantes: <span id="restantes">50</span></p> </form> <script type="text/javascript"> $(document).ready(function() { var maxChar = 50; $("#sms").on("keyup", function() { var valorActual = $("#sms").val().length; var totalRestantes = maxChar - valorActual; $("#restantes").text(totalRestantes); }); }); </script> </body>Lo primero que hacemos en el script es crear una variable "maxChar" donde almacenaremos el numero máximo de caracteres permitidos.
A continuación seleccionamos el área de texto mediante su id $("#sms) y le aplicamos la función "on()" que nos permite adjuntar un controlador de eventos genérico. En este caso primero indicamos que controle eventos del teclado "keyup" y en caso de que se cree alguno se aplicará una función anónima.
En la función simplemente creamos una variable "valorActual" en la que almacenamos el numero de caracteres introducidos en el área del texto. Para ello le aplicamos la función "val()" que nos devolverá el valor introducido en el área del texto y para que nos devuelva el numero de caracteres de esa cadena de texto le aplicamos "length".
En la siguiente variable "totalRestantes" simplemente almacenamos la diferencia de caracteres. Y ya para terminar mostramos los caracteres restantes mediante un selector y la función "text()" indicando entre paréntesis el nuevo valor.
3.2 Desactivar entrada de caracteres
En el ultimo ejemplo del articulo vamos a crear una pantalla típica de login. La pantalla nos mostrara dos caja que nos pedirán un usuario y una contraseña, a parte tendrá un checbox que si lo seleccionamos nos dejara entrar como invitados desactivando las cajas de usuario y contraseña. Cogiendo el ejemplo anterior vamos a sustituir la parte del cuerpo del documento por esta otra:
<body> <h1>Desactivar formulario</h1> <hr> <form action="#"> Acceder como invitado: <input type="checkbox" name="invitado" id="invitado"> <br /> <br /> Usuario: <input class="datos" type="text" name="usuario" id="usuario"> <br /> <br /> Clave: <input class="datos" type="text" name="clave" id="clave"> <br /> <br /> <input id="submit" type="submit" name="submit" value="Login"> </form> <script type="text/javascript"> $(document).ready(function() { $("#invitado").click(function() { if ($("#invitado").attr("checked") == "checked") { $(".datos").removeAttr("disabled"); $("#invitado").removeAttr("checked"); } else if ($("#invitado").attr("checked") == undefined) { $(".datos").val(""); $(".datos").attr("disabled", "disabled"); $("#invitado").attr("checked", "checked"); } }); }); </script> </body>
Empezamos el código seleccionando el chekbox mediante su id $("#invitado") y le aplicamos la función "click()" para controlar cuando se produce un click de ratón en el chekbox.
Creamos la función anónima y seguidamente utilizamos un condicional que comprobará cuando el chekbox esta activado o desactivado. Para ello seleccionamos el chekbox por su id y le aplicamos la función "attr()" para recuperar su atributo "checked" que nos indicara si esta pulsado o no.
En el caso de desactivarlo (primer condicional) creamos un selector mediante clase $(".datos") para seleccionar las dos cajas de texto y eliminamos el atributo "disabled" mediante la función "removeAttr()" (atributo que nos permite activar o desactivar algunos elementos). Para concluir este condicional, en la siguiente linea de código simplemente indicamos que el checkbox esta desmarcado.
En el caso de activarlo (segundo condicional) utilizamos el mismo selector de clase $(".datos") y limpiamos las cajas de texto mediante la función "val()" indicando que no queremos ningún texto dentro de la caja. Después utilizamos la función "attr()" para desactivar las cajas de texto y en los paréntesis primero escribimos el atributo a modificar "disabled" y después de la coma indicamos su valor. En la ultima linea de código indicamos que el checkbox esta marcado.
No hay comentarios:
Publicar un comentario