2

Tengo un formulario típico (nombre, apellidos, ....) y tengo varios botones.

Uno de ellos su función es borrar el texto del campo (input) sobre el que se tiene el foco.

Tengo una variable que me almacena el id del campo sobre el que se tiene el foco y esta se va "cambiando" cada vez que cambia el foco.

El problema es que cuando hago la llamada al botón "limpiar campo" y le digo que borre el valué del id (guardado en la variable) que le paso, lo que me borra es el value del botón.

¿Alguien me puede echar una mano?

PD: No puedo utilizar OnClick, OnSubmit, ni tampoco jQuery.

Dejo una parte del código, porque son bastante lineas con otras funciones:

function iniciar() {

  document.getElementById("limpiar").addEventListener('click', resetear, false);
  document.getElementById("enviar").addEventListener('click', validar, false);
  document.getElementById("limpiarcampo").addEventListener('click', limpiacampos, false);

  function limpiacampos() {

    document.getElementById(campoid).value = "";
    document.getElementById(campoid).focus();
  }

  //Vamos a cambiar el fondo del input a color amarillo, cuando hagamos focus sobre el.
  form = document.getElementById("miformulario");

  form.addEventListener("focus", function(evento) {
    evento.target.style.background = "yellow";
  }, true);

  form.addEventListener("blur", function(evento) {
    evento.target.style.background = "";
  }, true);

  //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);

}
<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>

  <input type="reset" name="limpiar" id="limpiar" value="Reiniciar Formulario" />
  <input type="button" id="limpiarcampo" name="limpiarcampo" value="Limpiar Campo"></br>
  <input type="submit" id="enviar" name="enviar" value="Enviar"></br>

</form>

4
  • 2 variables: foco actual y anterior, al pulsar el boton borras el anterior Commented el 11 mar. 2020 a las 9:48
  • Una cosa que no entiendo es porque tienes dos event handlers de tipo 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 el focus y no un input, creo que deberías filtrar por event.target y validar que no sea un input[type="button"] y guardar su id
    – hawks
    Commented el 11 mar. 2020 a las 10:05
  • No te compliques tanto, sólo debes guardar el foco de los campos de entrada de texto, de ese modo cuando el button reciba el foco (click) no los va a pisar.
    – quevedo
    Commented el 11 mar. 2020 a las 10:17
  • Cuando haces click en el botón limpiar campo haces también click en el formulario y por lo tanto esto cambia el valor de la variable campoid al id del botón limpiar campo. La solución en este caso es poner este botón fuera del formulario
    – enxaneta
    Commented el 11 mar. 2020 a las 13:21

2 respuestas 2

0

Debido al orden de ejecución de los eventos blur y focus, no es posible conocer cuál fue el elemento que perdió el foco al ganarlo el botón pulsado.

Como solución, podrías almacenar el elemento que perdió el foco en una variable efímera que pierda su valor tras, por ejemplo, 200ms mediante un temporizador del tipo:

setTimeout(() => { ... }, 200);

Un ejemplo de funcionamiento lo tienes aquí:

document.addEventListener("DOMContentLoaded", evento => {
  /* Variable que almacenará de manera efímera el elemento que abandona el foco */
  let ultimo = null;
  /* Sólo registro los eventos de pérdida de foco */
  document.getElementById('miformulario')
    .addEventListener('blur', evento => {
      evento.target.style.background = "";
      /* Almacenamos el elemento que pierde el foco */
      ultimo = evento.target;
      console.log('Sale:', evento.target.id);
      /* Tras 200ms lo olvidaremos */
      setTimeout(() => { ultimo = null; }, 200);
    }, true);
  /* Cuando se pulse el botón de limpieza, mostraremos el "id" del último elemento que perdió el foco */
  document.getElementById('limpiarcampo')
    .addEventListener("click", evento => {
      console.log('Último elemento:', ultimo);
      /* Limpiamos el contenido si no hemos olvidado el último elemento */
      if (ultimo !== null) {
        ultimo.value = '';
      }
    });
});
<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/>
  <input type="reset" name="limpiar" id="limpiar" value="Reiniciar Formulario" /><input type="button" id="limpiarcampo" name="limpiarcampo" value="Limpiar Campo"><br/>
  <input type="submit" id="enviar" name="enviar" value="Enviar"><br/>
</form><div style="height: 500px"></div>

0

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 bluro 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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.