Bienvenidos sean a este post, hoy hablaremos sobre un tipo de evento un tanto particular porque este tipo de evento se activa cuando un elemento toma “foco”, es decir es seleccionado, pasa a estar activo, se pulso sobre el mismo o porque ha ejecutado el metodo focus, con esto podemos decir que el tomar foco es la accion de trabajar sobre un elemento y para entender un poco mejor este concepto vamos a tomar el ejemplo anterior y haremos una serie de modificaciones para trabajar con este evento:

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;
} 
//-->
</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');">
</td>
</tr>
<tr>
<td> Ingrese el nombre:</td>
<td>
<input type="text" name="nombre" id="nombre" value="" onFocus="form_focus('nombre');">
</td>
</tr>
<tr>
<td> Ingrese el apellido:</td>
<td>
<input type="text" name="apellido" id="apellido" value="" onFocus="form_focus('apellido');">
</td>
</tr>
<tr>
<td> Selecciona el sexo:</td>
<td>
<select name="sexo" id="sexo" onChange="form_change('dos');"  onFocus="form_focus('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>
</body>
</html>

En este caso tenemos el codigo del post anterior pero en este caso agregaremos la sentencia onFocus en cada uno de los elementos del formulario, tomemos el primero como ejemplo:

onFocus="form_focus('usuario');"

En este caso tenemos la sentencia que interceptara este evento y llamara a la funcion form_focus a la cual enviara un valor que identificara al campo que obtuvo el foco, si observan la linea es la misma para usuario, otro para nombre, otro para apellido y otra para sexo, y para cada uno de ellos el valor respectivo. Nuestra siguiente modificacion sera agregar un elemento de tipo DIV al cual llamaremos foco, pasemos a hablar sobre el codigo Javascript.

En el codigo Javascript agregaremos una nueva funcion, veamos la misma:

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

En este caso crearemos una objeto llamado foco a la cual por medio del getElementById le pediremos que busque y asigne el elemento foco, despues por medio de este objeto y el metodo innerHTML mostraremos un mensaje y el valor enviado a la variable A, para entender mejor este ejemplo veamos el siguiente video

En este caso tenemos todas las notificaciones de los casos anteriores pero tambien por debajo de los botones vemos como se muestra el texto que enviamos por medio de innerHTML al campo DIV llamado foco y vean como nos identifica que campo es identificado al momento de tomar foco.

Anuncios

En resumen, hoy hemos visto el evento onFocus, hemos visto cual es su funcion, como se utiliza, un uso practico para el mismo, y un ejemplo practico para verlo en accion, 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