18 - Evento blur.

El evento blur se dispara cuando pierde el foco el control.
Podemos capturar el evento blur de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.

Para probar su funcionamiento dispondremos dos controles de tipo text con algún contenido. Fijaremos de color azul su fuente. Al tomar foco el control cambiará a color rojo y al perder el foco volverá a color azul.

pagina1.html

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text1" id="text1" value="Hola" 
size="20">
<br>
<input type="text" name="text2" id="text2" value="Hola" 
size="20">
</form>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x=$("#text1");
  x.focus(tomaFoco);
  x.blur(pierdeFoco);
  x=$("#text2");
  x.focus(tomaFoco);
  x.blur(pierdeFoco);
}

function tomaFoco()
{
  var x=$(this);
  x.css("color","#f00");
}

function pierdeFoco()
{
  var x=$(this);
  x.css("color","#00f");
}

estilos.css

#text1,#text2 {
  color:#00f;
}

En la función inicializar eventos asociamos los eventos focus y blur a los dos controles:

function inicializarEventos()
{
  var x=$("#text1");
  x.focus(tomaFoco);
  x.blur(pierdeFoco);
  x=$("#text2");
  x.focus(tomaFoco);
  x.blur(pierdeFoco);
}

El evento tomaFoco cambia de color a rojo al texto del control seleccionado:

function tomaFoco()
{
  var x=$(this);
  x.css("color","#f00");
}

De forma similar pierdeFoco cambia a azul:

function pierdeFoco()
{
  var x=$(this);
  x.css("color","#00f");
}


Retornar