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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="buscar" id="buscar" 
value="Buscar..." size="20">
</form>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#buscar");
  x.focus(tomaFoco);
}

function tomaFoco()
{
  var 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:

  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()
{
  var x=$("#buscar");
  x.attr("value","");
}


Retornar