El evento focus se produce cuando se activa el control. Podemos capturar el evento focus de un control de tipo text, textarea, button, checkbox, file, password, radio, reset, submit, search, href etc.
Es común a muchos sitio donde se puede buscar información,disponer un control de tipo 'search' 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.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<form action="#" method="post">
<input type="search" name="buscar" id="buscar" value="Buscar..." size="20">
</form>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.getElementById('buscar').addEventListener('focus', (e) => {
e.target.value = ''
})
Registramos el evento focus al control de tipo input cuyo id es 'buscar':
document.getElementById('buscar').addEventListener('focus', (e) => {
e.target.value = ''
})
Cuando se activa con el mouse el control input (es decir toma foco) procedemos a borrar su contenido:
e.target.value = ''
Accedemos a la propiedad target del parámetro que llega a la función (recordemos que target tiene la referencia del objeto que disparó el evento)