El Atributo ONRESET

El atributo onreset se utiliza para ejecutar código JavaScript cuando un formulario HTML es restablecido a sus valores iniciales.

El atributo onreset se utiliza para ejecutar código JavaScript cuando un formulario HTML es restablecido a sus valores iniciales. Este evento se dispara al usar el botón <input type="reset"> o el método form.reset() en JavaScript.

???? Sintaxis básica

<form onreset="miFuncion()">
  <!-- Campos del formulario -->
  <input type="reset" value="Restablecer">
</form>

Run HTML

// Método alternativo con JavaScript
document.getElementById("miFormulario").addEventListener("reset", (event) => {
  // Lógica aquí
});

???? Características clave

Se activa antes de que el formulario se restablezca.
Permite validar o cancelar el restablecimiento.
Útil para confirmaciones, limpieza de datos o seguimiento de acciones.

???? Ejemplos prácticos

1. Confirmación básica de restablecimiento

<form onreset="return confirm('¿Seguro que quieres borrar todos los datos?')">
  <input type="text" name="nombre" value="Ejemplo">
  <input type="reset" value="Borrar">
</form>

Run HTML

2. Registro de actividad

<form id="formRegistro" onreset="registrarReset()">
  <input type="email" name="email">
  <input type="reset" value="Restablecer">
</form>
<p id="contador">Restablecimientos: 0</p>

<script>
let contador = 0;
function registrarReset() {
  contador++;
  document.getElementById("contador").textContent = `Restablecimientos: ${contador}`;
}
</script>

Run HTML

3. Cancelación condicional

<form onreset="return validarReset()">
  <textarea name="comentario">Texto existente...</textarea>
  <input type="reset" value="Borrar">
</form>

<script>
function validarReset() {
  const textoActual = document.querySelector("textarea").value;
  if (textoActual.length > 100) {
    return confirm("¡Este texto es largo! ¿Seguro que quieres borrarlo?");
  }
  return true;
}
</script>

Run HTML

???? Casos de uso avanzados

1. Limpieza de campos personalizados

<form onreset="limpiarCamposAdicionales(event)">
  <div id="camposDinamicos"></div>
  <button type="button" onclick="agregarCampo()">Agregar campo</button>
  <input type="reset" value="Restablecer">
</form>

<script>
function agregarCampo() {
  const div = document.getElementById("camposDinamicos");
  div.innerHTML += `<input type="text" name="campo${div.children.length}">`;
}

function limpiarCamposAdicionales(event) {
  document.getElementById("camposDinamicos").innerHTML = "";
  event.preventDefault(); // Evita el reset estándar
}
</script>

Run HTML

2. Integración con APIs

<form onreset="enviarAnalitica()">
  <input type="text" name="busqueda">
  <input type="reset" value="Borrar búsqueda">
</form>

<script>
function enviarAnalitica() {
  fetch("/api/analitica", {
    method: "POST",
    body: JSON.stringify({
      accion: "reset",
      hora: new Date().toISOString()
    })
  });
}
</script>

Run HTML

⚠️ Consideraciones importantes

Orden de ejecución:
- El evento onreset se dispara antes de que los campos se restablezcan.
- Usar event.preventDefault() para cancelar el restablecimiento.
Compatibilidad:

Navegador Soporte

Chrome ✅ Sí

Firefox ✅ Sí

Safari ✅ Sí

Edge ✅ Sí

Navegador	Soporte
Chrome	✅ Sí
Firefox	✅ Sí
Safari	✅ Sí
Edge	✅ Sí

Mejores prácticas:

// Usar preventDefault() para cancelar
form.addEventListener("reset", (event) => {
  if (!confirmarReset()) {
    event.preventDefault();
  }
});

???? Diferencias clave con otros eventos

Evento	Descripción	Momento de activación
`onreset`	Restablecimiento de formulario	Al iniciar el reset
`onsubmit`	Envío de formulario	Al enviar datos
`onchange`	Cambio en campo de formulario	Al modificar un campo

???? Conclusión

El atributo onreset es útil para:

Agregar confirmaciones antes de borrar datos
Realizar limpieza personalizada
Integrar con sistemas de analítica
Manejar formularios complejos con campos dinámicos

Ejemplo final avanzado:

<form onreset="manejarReset(event)">
  <input type="text" name="usuario" value="Admin">
  <input type="password" name="clave" value="1234">
  <input type="reset" value="Restaurar valores iniciales">
</form>

<script>
const valoresOriginales = {
  usuario: "Admin",
  clave: "1234"
};

function manejarReset(event) {
  if (valoresOriginales.usuario !== "Admin") {
    alert("¡Los valores por defecto han cambiado!");
    event.preventDefault();
  }
}
</script>

Run HTML

Con este conocimiento, podrás crear formularios más interactivos y seguros. ¡Experimenta con diferentes implementaciones!