Bienvenidos sean a este post, hoy hablaremos sobre un evento que podriamos considerar el opuesto a lo visto en el post anterior porque este evento se activa cuando el elemento pierde foco o podemos decir que fue deseleccionado o se cambio por otro elemento. Su accion es similar a onFocus pero se activa cuando se cambia el elemento, tomemos el ejemplo anterior y hagamos una serie de modificaciones:

Anuncios
<html>
<head>
<title>Pagina de eventos de Formularios</title>
<script language="Javascript">
<!--

function form_submit()
{
	var usuario=document.miForm.usuario.value;
	var nombre=document.miForm.nombre.value;
	var apellido=document.miForm.apellido.value;
	var texto; 
	texto="Usuario: " + usuario + "\n";
	texto+="Nombre: " + nombre + "\n";
	texto+="Apellido: " + apellido + "\n";
	texto+="Sexo: " + document.miForm.sexo.value;
	alert(texto);
}
function form_reset()
{
	alert("Se hizo el reseteo del formulario");
}
function form_change(A)
{
	switch(A)
	{
		case "uno":
			alert("Se modifico el campo usuario");
			break;
		case "dos":
			alert(document.miForm.sexo.value);
			break;
	}	
}
function form_focus(A)
{
	var foco=document.getElementById("foco");
	foco.innerHTML+="Se selecciono al campo " + A;
}
function form_blur(A)
{
	var foco=document.getElementById("foco");
	foco.innerHTML="Se deselecciono al campo " + A + "<br>";		
}
//-->
</script>
</head>
<body>
<form name="miForm" method="post" action="" onSubmit="form_submit()" onReset="form_reset()">
<table border="0" cellpadding="0" cellspacing="2" width="400">
<tr>
<td width="50%"> Ingrese un usuario:</td>
<td width="50%">
<input type="text" name="usuario" id="usuario" value="" onChange="form_change('uno');" onFocus="form_focus('usuario');" onBlur="form_blur('usuario')">
</td>
</tr>
<tr>
<td> Ingrese el nombre:</td>
<td>
<input type="text" name="nombre" id="nombre" value="" onFocus="form_focus('nombre');" onBlur="form_blur('nombre')">
</td>
</tr>
<tr>
<td> Ingrese el apellido:</td>
<td>
<input type="text" name="apellido" id="apellido" value="" onFocus="form_focus('apellido');" onBlur="form_blur('apellido')">
</td>
</tr>
<tr>
<td> Selecciona el sexo:</td>
<td>
<select name="sexo" id="sexo" onChange="form_change('dos');"  onFocus="form_focus('sexo');" onBlur="form_blur('sexo')">
<option value="">--</option>
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>	
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td align="right"><input type="submit" value="Subir"> </td>
<td> <input type="reset" value="Resetear"></td>
</tr>
</table>
</form>
<div name="foco" id="foco"></div>
</body>
</html>

En este ejemplo el cambio es una sutil diferencia, al igual que en el caso anterior agregamos a cada campo la siguiente sentencia:

onBlur="form_blur('usuario')"

En este caso vemos al comando onBlur encargado de interceptar este evento llamando a una funcion llamada form_blur y en el mismo enviamos un valor, en este caso el nombre del elemento, lo mismo hicimos con cada uno de los elementos del formulario y en cada uno de ellos reemplazamos el valor con el nombre correspondiente, pasemos a hablar sobre el codigo Javascript.

En este caso tendremos una nueva funcion y una modificacion sobre la funcion form_focus, en este caso la modificamos de la siguiente manera:

function form_focus(A)
{
	var foco=document.getElementById("foco");
	foco.innerHTML+="Se selecciono al campo " + A;
}

En este caso si lo comparamos con el post anterior le agregamos operador += para que al nuevo texto lo agregue al existente, veamos el codigo de la nueva funcion:

function form_blur(A)
{
	var foco=document.getElementById("foco");
	foco.innerHTML="Se deselecciono al campo " + A + "<br>";		
}

En este caso es muy similar al anterior pero con la diferencia que el texto ingresado reemplaza al contenido del mismo y en este caso utilizamos nuevamente al DIV llamado foco para mostrar la informacion, si lo grabamos y probamos obtendremos una salida semejante al siguiente video

Observen cuando seleccionamos un elemento nos muestra el mensaje de seleccion, cuando elegimos nos notifica cual se dejo y cual se eligio, un detalle cuando vamos a uno de los mensajes de notificacion nos sucede lo mismo esto es porque dejamos de tener la atencion sobre ese elemento.

Anuncios

En resumen, hoy hemos visto el evento onBlur, cual es su utilidad, como se utiliza, cuando podemos aplicarlo y un ejemplo donde lo pusimos en practica, espero les haya sido util sigueme en Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00