jQuery blur(): Detectar la pérdida del foco en los elementos del DOM

Repaso a la función de jQuery blur(), su funcionalidad es la detección de la pérdida del foco en los diferentes elementos del DOM de una página web. El evento opuesto es jQuery focus().

Otras funciones de detección son:

• click() y dblclick()
• keydown() y keyup()
• mouseover() y mouseout()
• mouseenter() y mouseleave()

Sintaxis de jQuery blur()

Veamos la sintaxis de esta función de jQuery extraída de su web oficial:

$(selector).blur(funcion)

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.

Os explico los parámetros:

• selector (Obligatorio): Elemento que queremos controlar.
• funcion (Opcional): Función callback a ejecutar cuando el elemento pierde el foco.

Ejemplo de jQuery blur()

Vamos a ver en este ejemplo de blur() cómo detectar la pérdida del foco en un elemento:

$(document).ready(function()
 {
 $("#texto1").blur(function(){
      $(this).css("background-color", "#FFFFCC");
 });

 $("#texto2").blur(function(){
  $(this).hide("slow");
 });
});

Os explico el código superior:

• En el primer ejemplo detectamos la pérdida del foco en el elemento con id = ‘texto1’. Posteriormente ejecutamos la función de jQuery css() y le damos un fondo gris al input.
• En el segundo detectamos la pérdida del foco en el elemento con id = ‘texto2’. Posteriormente ejecutamos la función de jQuery hide() y hacemos desaparecer el input.

Código HTML del ejemplo

Os muestro el código HTML de los input del ejemplo:

<input type="text" id="texto1" value="Primer textbox">

<input type="text" id="texto2" value="Segundo textbox">