Para interactuar con los componentes de formulario utilizaremos los siguientes eventos:
- focus(): el componente obtiene el foco.
- blur(): el componente pierde el foco.
- change(): el contenido del componente es modificado (se producirá cuando pierda el foco).
- select(): se selecciona el contenido.
- submit(): cuando el formulario es enviado.
La forma de definirlos es muy sencilla, como puedes comprobar en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Eventos de formularios en JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#log { color:yellow;background-color:red; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Cuando 'nombre' obtiene el foco
$("#nombre").focus(function() {
$("#log").text("El cuadro de texto 'nombre' ha obtenido el foco");
});
// Cuando 'nombre' pierde el foco
$("#nombre").blur(function() {
$("#log").text("El cuadro de texto ha perdido el foco");
});
// Cuando se edita 'apellido1'
$("#apellido1").change(function() {
$("#log").text("Se ha modificado el primer apellido");
});
// Cuando se selecciona todo o parte del texto en 'apellido1'
$("#apellido2").select(function() {
$("#log").text("Se ha seleccionado el texto");
});
// Seleccionar el texto de 'nombre'
$("#btnSeleccionar").click(function() {
$("#nombre").select();
});
$("#form1").submit(function() {
$("#log").text("Se ha enviado el formulario");
// Cancelamos el envío
return false;
});
});
</script>
</head>
<body>
<div id="log"> </div>
<form name="form1" id="form1" method="post" action="#">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" value="" /><br />
<label for="apellido1">Apellido 1º:</label>
<input type="text" name="apellido1" id="apellido1" value="" />
<label for="apellido2">Apellido 2º:</label>
<input type="text" name="apellido2" id="apellido2" value="" /><p />
<input type="button" name="btnSeleccionar" id="btnSeleccionar" value="Seleccionar texto del nombre" />
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar formulario" />
</form>
<p>Realiza los siguientes pasos y comprueba el resultado:</p>
<ul>
<li>Haz clic en el nombre para darle el foco, y después en otro cuadro de texto.</li>
<li>Escribe algo en el primer apellido y después cambia a otro cuadro de texto.</li>
<li>Escribe algo en el recuadro del segundo apellido y selecciónalo después.</li>
<li>Pulsa el botón para seleccionar el texto del nombre.</li>
</ul>
</body>
</html>

Vea también: [ Eventos ] - [ Objeto Event ] - [ Eventos de formulario ]