¿Te gustaría aprender cómo mejorar la experiencia de usuario en tu sitio web? ¡Entonces los eventos de jQuery Focus son para ti! En este artículo de TIEngranaje te explicamos todo lo que necesitas saber sobre estos eventos y cómo implementarlos en tu proyecto. Acompáñanos en este recorrido por una de las herramientas más útiles de jQuery para el manejo de eventos en formularios y elementos de contenido. ¡Empecemos!
jQuery tiene varios eventos relacionados con el enfoque: focus, focusiny focusout. El focus El evento ocurre cuando un elemento obtiene enfocarcomo cuando el elemento se selecciona con un clic del mouse o usando la tecla de tabulación en el teclado para navegar al elemento de destino.
El focus() método activa la focus evento, o especifica una función para ejecutar cuando un focus evento ocurre. El focusin evento es similar al focus evento, pero a diferencia del focus() método, el focusin() el método se activa si algún elemento secundario obtiene el foco. Lo mismo es cierto con el focusout() método.
Sintaxis
$(selector).focus(function())
$(selector).focusin(function())
$(selector).focusout(function())| Parámetro | Descripción |
|---|---|
function |
Especifica la función que se ejecutará cuando se produzca el evento. |
Ejemplo de enfoque
En el siguiente ejemplo de jQuery, cuando un usuario hace clic en un input elemento o utiliza la tecla de tabulación, el actualmente seleccionado input elemento activará el focus() método.
En el siguiente ejemplo, cuando se activa este evento, se aplica un conjunto de propiedades CSS diferente al elemento que tiene adjunto el evento de enfoque. Cuando el usuario hace clic en un elemento de entrada diferente, el focusout() se activa el método.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-focus-focusin-focusout-event/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function() {
$(this).css({ "background-color": "#999999", "color": "#FFFFFF"});
});
$("input").focusout(function() {
$(this).css({ "background-color": "#FFFFFF", "color": "#999999"});
});
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td>First Name</td>
<td><input /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input /></td>
</tr>
<tr>
<td>Department</td>
<td><input /></td>
</tr>
</table>
</div>
</body>
</html>Ejemplo de enfoque y enfoque
En el siguiente ejemplo de jQuery, cuando un usuario hace clic en un elemento secundario del elemento principal, el focusin evento que se adjunta al padre es ejecutado.
En el siguiente ejemplo, el focusin() El método desencadena y ejecuta una función para modificar la propiedad CSS background-color del elemento principal.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-focus-focusin-focusout-event/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").focusin(function() {
$(this).css({ "background-color": "#8A0808", "color": "#FFFFFF"});
});
$("div").focusout(function() {
$(this).css({ "background-color": "#DEDEDE", "color": "#666666"});
});
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td>First Name</td>
<td><input /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input /></td>
</tr>
<tr>
<td>Department</td>
<td><input /></td>
</tr>
</table>
</div>
</body>
</html>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
