17 - Evento focus.

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.

pagina1.html

<!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="funciones.js"></script>
</body>

</html>

funciones.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", "");
}


Retornar