 |
Evento focus en jQuery
Evento focus ()
El evento focus se envía a un elemento cuando gana foco. Este evento es implícitamente aplicable a un conjunto limitado de elementos, tales como elementos de formulario ( <input>, <select>, etc.) y enlaces ( <a href>). En versiones recientes del navegador, el evento se puede extender para incluir todos los tipos de elementos estableciendo explícitamente la propiedad tabindex del elemento . Un elemento puede enfocarse a través de comandos de teclado, como la tecla Tab, o haciendo clic con el mouse en el elemento.
Los elementos con foco suelen ser resaltados de alguna manera por el navegador, por ejemplo, con una línea de puntos que rodea al elemento. El foco se usa para determinar qué elemento es el primero en recibir eventos relacionados con el teclado.
Los elementos con foco suelen ser resaltados de alguna manera por el navegador, por ejemplo, con una línea de puntos que rodea al elemento. El foco se usa para determinar qué elemento es el primero en recibir eventos relacionados con el teclado.
Ejemplo
Adjunte una función al evento de enfoque. El evento de enfoque ocurre cuando el campo <input> obtiene el enfoque:
<!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").focus(function(){
$("span").css("display", "inline").fadeOut(2000);
});
});
</script>
<style>
span {
display: none;
}
</style>
</head>
<body>
<input>
<span>¡Hizo foco en el campo!</span>
<p>Haga clic en el campo de entrada para enfocarse..</p>
</body>
</html>
El evento focus se produce cuando se activa el control. Podemos capturar el evento focus de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.
Es común a muchos sitio donde se puede buscar información,disponer un control de tipo text con la leyenda 'Buscar...' y sin ningún botón a su lado. Cuando el control toma foco se borra automáticamente su contenido, el operador ingresa el texto a buscar y presiona la tecla ENTER.Para probar como capturar este evento implementaremos una página que resuelva el problema anteriormente planteado.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<form action="#" method="post">
<input type="text" name="buscar" id="buscar" value="Buscar..." size="20">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func17.js"></script>
</body>
</html>
func17.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#buscar");
x.focus(tomaFoco);
}
function tomaFoco() {
let x = $("#buscar");
x.attr("value", "");
}
En la función inicializarEventos creamos un objeto jQuery a partir del id del control de tipo text y asociamos el evento focus con el método tomaFoco:
let x = $("#buscar");
x.focus(tomaFoco);
El método tomaFoco obtiene la referencia del elemento tipo text y mediante el método attr modifica la propiedad value:
function tomaFoco() {
let x = $("#buscar");
x.attr("value", "");
}