Skip to main content
50ms no es suficiente tiempo de espera, 100 sí, pero pongo 200 para tener más margen
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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

setTimeout(() => { ... }, 50200);
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 50ms200ms lo olvidaremos */
      setTimeout(() => { ultimo = null; }, 50200);
    }, 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> <brlabel><br/>
  <input><input type="text" name="nombreMascota" id="nombreMascota"> <brid="nombreMascota"><br/>
   <br><br/>
 
  <label for="texto">Login de Propietario:</label> <brlabel><br/>
  <input><input type="text" name="loginPropietario" id="loginPropietario"> <brid="loginPropietario"><br/>
   <br><br/>
 
  <label for="texto">Contraseña:</label> <brlabel><br/>
  <input><input type="text" name="contraseña" id="contraseña"> <brid="contraseña"><br/>
   <br><br/>
 
  <label for="texto">Repite la constraseña:</label> <brlabel><br/>
  <input><input type="text" name="contraseña2" id="contraseña2"> <brid="contraseña2"><br/>
   <br><br/>
 
  <label for="texto">Especie:</label> <brlabel><br/>
  <input><input list="especies" id="inputespecies" name="getespecies"> <brname="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> <brdatalist><br/>

  <label for="texto">Sexo:</label> <brlabel><br/>
  <input><input class="radiobutton" type="radio" name="sexo" id="sexoM" Value="macho" checked>
  <!-- Dejamos macho por defecto -->
  <label for="texto">Macho</label>
  <inputlabel><input class="radiobutton" type="radio" name="sexo" id="sexoH" value="hembra">
  <labelvalue="hembra"><label for="texto">Hembra</label> <brlabel><br/>
   <br><br/>
   <br><br/>
 
  <input type="reset" name="limpiar" id="limpiar" value="Reiniciar Formulario" />
  <input><input type="button" id="limpiarcampo" name="limpiarcampo" value="Limpiar Campo"> <brCampo"><br/>
  <input type="submit" id="enviar" name="enviar" value="Enviar"> <brvalue="Enviar"><br/>
 
</form>
<divform><div style="height: 500px"></div>

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

setTimeout(() => { ... }, 50);
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 50ms lo olvidaremos */
      setTimeout(() => { ultimo = null; }, 50);
    }, 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>

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);
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>
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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, 50ms mediante un temporizador del tipo:

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

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 50ms lo olvidaremos */
      setTimeout(() => { ultimo = null; }, 50);
    }, 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>