Evento blur()

El evento blur() se da cuando un elemento pierde el foco que obtuvo al ser clickado por el ratón o llegando por navegación tabular. Esta funcionalidad puede resultar interesante cuando se trabaja con formularios con numerosos input y elementos con los que el usuario tiene que trabajar.

Evento blur()

El evento de desenfoque ocurre cuando un elemento pierde el foco. El método blur () activa el evento de desenfoque o adjunta una función para que se ejecute cuando ocurre un evento de desenfoque.

Sugerencia: este método se usa a menudo junto con el método focus () .

Ejemplo

Adjunte una función al evento de desenfoque. El evento de desenfoque ocurre cuando el campo <input> pierde el foco:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").blur(function(){
    alert("Este campo de entrada ha perdido su enfoque.");
  });
});
</script>
</head>
<body>

Entre su nombre: <input type="text">

<p>Escriba algo en el campo de entrada y luego haga clic fuera del campo para perder el enfoque (desenfoque).</p>

</body>
</html>

Ver ejemplo anterior

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.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos18.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="func17.js"></script>
</body>

</html>
Ver ejemplo anterior

func18.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");
}

estilos18.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");
}