jQuery focus(): Detectar el foco en los elementos de la web

Nuevo post para repasar la función de jQuery focus(), su funcionalidad es la de detectar el foco en los diferentes elementos del DOM. El evento opuesto es la función blur().

Otras funciones de detección son:

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

Sintaxis de jQuery focus()

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

$(selector).focus(funcion)

El evento focus se da cuando un elemento recibe el foco 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 recibe el foco.

Ejemplo de jQuery focus()

Vamos a ver en este ejemplo de focus() cómo detectar el foco en un elemento:

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

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

Os explico el código superior:

• En el primer ejemplo detectamos el 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 el 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">

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM