Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

Sintaxis de jQuery blur()

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

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:

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:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies