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

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

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

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

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

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

estilos.css

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

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

function inicializarEventos() {
  let 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() {
  let x = $(this);
  x.css("color", "#f00");
}

De forma similar pierdeFoco cambia a azul:

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


Retornar