Nota:
Puede correr el ejemplo directamente y luego leer esta publicación, pero se recomienda leerla primero. Lea los comentarios que se encuentran ubicados en el código.
Observación
Partiendo de lo que planteas en tu pregunta y del siguiente fragmento tomado de tu pregunta:
form.addEventListener("focus", function(evento) {
evento.target.style.background = "yellow";
}, true);
Y este otro:
form.addEventListener("blur", function(evento) {
evento.target.style.background = "";
}, true);
Además de éste:
// Capturamos el ID de cada campo sobre el que se hace el foco
form.addEventListener("focus", function() {
var focusedElement = document.activeElement;
campoid = focusedElement.id;
console.log(campoid);
}, true);
Se entiende que deseas que el campo tenga fondo amarillo cuando tenga el foco (focus). Además, cuando se presione el botón Limpiar Campo borre el campo previamente seleccionado por el usuario.
Ten en cuenta que, form.addEventListener("focus", funcion () {}, true);
captura el foco del elemento formulario (si fuese enfocable) y no de sus campos, por lo tanto, no funcionará. Lo mismo que para form.addEventListener("blur", funcion () {}, true);
porque no tiene foco que perder.
En cuanto al resaltado en amarillo de la caja de texto, se recomienda definirlo en una hoja de estilos. Por ejemplo:
[name] {
border: 1px solid silver;
height: 30px;
padding: 0 10px;
transition: 300ms ease;
}
[name]:focus {
background-color: yellow;
}
Ya que cumpliría con el objetivo que buscas.
Transferir al botón la información del elemento a limpiar
Se puede hacer independientemente de que se utilice el evento focus
o blur
. Basta con transferirle al botón Limpiar Campo la información del elemento al que se le limpiarán los datos.
Propuesta para el código HTML
Realizar los siguientes cambios a tu código HTML:
Eliminar de los botones del formulario el atributo name ya que no es necesario para el envío de datos a través del formulario.
Agregar el atributo data-id
al botón que se encargará de limpiar un campo específico.
Utilizar <button />
en lugar de <input type="button" />
.
Es decir, reemplazar este fragmento de código:
<input type="reset" name="limpiar" id="limpiar" value="Reiniciar Formulario" />
<input type="button" id="limpiarcampo" name="limpiarcampo" value="Limpiar Campo" />
<input type="submit" id="enviar" name="enviar" value="Enviar" />
Por este otro:
<button type="reset" id="limpiar">Reiniciar Formulario</button>
<button type="button" id="limpiarcampo" data-id="">Limpiar Campo</button>
<button type="submit" id="enviar">Enviar</button>
Propuesta de implementación JavaScript
Para el caso de JavaScript se podría realizar las siguientes acciones:
Obtener todos los campos del formulario a través del atributo name
es decir:
const campos = document.querySelectorAll("[name]");
Se captura el evento blur
o focus
. En este caso capturaremos el evento blur
:
campos.forEach(campo => {
campo.onblur = () => {
// Se agrega al botón información del campo que deseamos
// limpiar a través del atributo «id» de la propiedad dataset.
limpiarcampo.dataset.id = campo.id;
};
});
Y finalmente, al hacer clic sobre el botón Limpiar Campo el botón borrará el texto del campo que estaba previamente seleccionado con la ayuda del siguiente ejemplo:
limpiarcampo.addEventListener("click", () => {
// Se evalúa que el campo previamente seleccionado
// por el usuario no sea «null»:
if (obtenerCampo(limpiarcampo) !== null)
obtenerCampo(limpiarcampo).value = ""; // Limpia el campo previamente seleccionado.
}, false);
Se definió previamente la función obtenerCampo() para devolver el campo seleccionado por el usuario.
Por ejemplo:
const obtenerCampo = ( boton ) => {
// Devuelve un campo previamente seleccionado por el usuario
// a través de la propiedad dataset o null.
return document.getElementById( boton.dataset.id );
};
Correr ejemplo completo
Tomando en cuenta lo anterior se entrega el código completamente funcional y documentado en los comentarios:
// Se obtienen los campos del formulario:
const campos = document.querySelectorAll( "[name]" );
// Función que devolverá un campo previamente seleccionado
// por el usuario, de lo contrario, devolverá «null»:
const obtenerCampo = ( boton ) => {
return document.getElementById( boton.dataset.id );
};
// Se captura el evento `blur` a todos los
// campos del formulario:
campos.forEach(campo => {
campo.onblur = () => {
// El campo previamente seleccionado por el usuario
// agregará información sobre él al botón, justo
// cuando pierda el foco:
limpiarcampo.dataset.id = campo.id;
};
});
// El usuario hace clic sobre el botón en cuestión:
limpiarcampo.addEventListener( "click", () => {
// Evalúa que el campo previamente seleccionado
// no sea nulo:
if ( obtenerCampo( limpiarcampo ) !== null )
obtenerCampo( limpiarcampo ).value = ""; // Limpiará el campo previamente seleccionado.
// Muestra en la consola información agregada al botón:
console.log( limpiarcampo.dataset.id );
// Limpia la información agregada al botón que se encarga de
// limpiar el campo previamente selecciondo:
limpiarcampo.dataset.id = "";
}, false );
/* Estilos a todos los campos del formulario */
[name] {
border: 1px solid silver;
height: 30px;
padding: 0 10px;
transition: 300ms ease;
}
/* Cuando se encuentre enfocado se resaltará
de amarillo */
[name]:focus {
background-color: yellow;
}
<form id="miformulario" method="post" action="#registro.php">
<h2>Formulario de registro</h2>
<label for="texto">Nombre de Mascota:</label><br>
<input type="text" name="nombreMascota" id="nombreMascota"><br>
<br>
<label for="texto">Login de Propietario:</label><br>
<input type="text" name="loginPropietario" id="loginPropietario"><br>
<br>
<label for="texto">Contraseña:</label><br>
<input type="text" name="contraseña" id="contraseña"><br>
<br>
<label for="texto">Repite la constraseña:</label><br>
<input type="text" name="contraseña2" id="contraseña2"><br>
<br>
<label for="texto">Especie:</label><br>
<input list="especies" id="inputespecies" name="getespecies"><br>
<datalist id="especies">
<option value="0" selected>Seleccione especie</option>
<option value="Abisinio">Abisinio</option>
<option value="Inseparable de Lilian">Inseparable de Lilian</option>
<option value="Malgache">Malgache</option>
<option value="Acollarado">Acollarado</option>
<option value="Inseparable de Mejillas negras">Inseparable de Mejillas negras</option>
<option value="Amarillo y naranja">Amarillo y naranja</option>
</datalist><br>
<label for="texto">Sexo:</label><br>
<input class="radiobutton" type="radio" name="sexo" id="sexoM" Value="macho" checked>
<!-- Dejamos macho por defecto -->
<label for="texto">Macho</label>
<input class="radiobutton" type="radio" name="sexo" id="sexoH" value="hembra">
<label for="texto">Hembra</label><br>
<br>
<br>
<!-- Cambios implementados en los botones -->
<button type="reset" id="limpiar">Reiniciar Formulario</button>
<button type="button" id="limpiarcampo" data-id="">Limpiar Campo</button><br>
<button type="submit" id="enviar">Enviar</button><br>
</form>
Fuentes externas:
Puede consultar la documentación oficial de Mozilla sobre la propiedad dataset:
IMPORTANTE
Da igual qué evento se capture. Es decir, focus
o blur
. En cualquiera de los casos funciona para enviar información sobre él (caja de texto) al botón que se encargará de borrar su contenido.
focus
. Y creo que te borra el contenido del botón es porque cuando clicas sobre el botón es ese elemento el que tiene elfocus
y no uninput
, creo que deberías filtrar porevent.target
y validar que no sea uninput[type="button"]
y guardar suid
campoid
al id del botón limpiar campo. La solución en este caso es poner este botón fuera del formulario