html - net - Borre todos los campos en un formulario al volver atrás con el botón Atrás del navegador

deshabilitar la cache y el boton atras del navegador

Question

Necesito una forma de borrar todos los campos dentro de un formulario cuando un usuario usa el botón Atrás del navegador. En este momento, el navegador recuerda todos los últimos valores y los muestra cuando regresa.

Más aclaración sobre por qué necesito esto . Tengo un campo de entrada deshabilitado cuyo valor se genera automáticamente usando un algoritmo para hacerlo único dentro de un cierto grupo de datos. Una vez que haya enviado el formulario y se hayan ingresado los datos en la base de datos, el usuario no podrá volver a utilizar el mismo valor para enviar el mismo formulario. Por lo tanto, he desactivado el campo de entrada en primer lugar. Pero si el usuario utiliza el botón Atrás del navegador, el navegador recuerda el último valor y el mismo valor se conserva en el campo de entrada. Por lo tanto, el usuario puede enviar el formulario con el mismo valor nuevamente.

Lo que no entiendo es qué sucede exactamente cuando presiona el botón de retroceso del navegador. Parece que la página completa se recupera de la caché sin contactar al servidor si el tamaño de la página está dentro del límite de caché del navegador. ¿Cómo me aseguro de que la página se carga desde el servidor independientemente de la configuración del navegador cuando presiona el botón Atrás del navegador?

Answer 1

A continuación, los enlaces pueden ayudarte ...

El botón Atrás del navegador restaura los campos vacíos , ¿ Borrar el formulario en el botón Atrás?

Espero que esto ayude ... Mejor suerte

Answer 2

Esto es lo que funcionó para mí.

<script>
$(window).bind("pageshow", function() {
    $("#id").val('''');
    $("#another_id").val('''');
});
</script>

Inicialmente tuve esto en la sección $ (document) .ready de mi jquery, que también funcionó. Sin embargo, escuché que no todos los navegadores disparan $ (documento). Listo al presionar el botón Atrás, así que lo saqué. No conozco los pros y los contras de este enfoque, pero lo he probado en múltiples navegadores en múltiples dispositivos, y no se encontraron problemas con esta solución.

Answer 3

Los navegadores modernos implementan algo conocido como caché de memoria (BFCache). Cuando presiona el botón retroceder / avanzar, la página actual no se vuelve a cargar (y los scripts nunca se vuelven a ejecutar).

Si tiene que hacer algo en caso de que el usuario toque las teclas atrás / adelante, escuche los eventos de páginas de pageshow y pagehide .

Un ejemplo de pseudo jQuery:

$(window).bind("pageshow", function() {
  // update hidden input field
});

Vea más detalles para las implementaciones de Gecko y WebKit .

Answer 4

Me encontré con esta publicación mientras buscaba una forma de borrar todo el formulario relacionado con BFCache (caché de botón hacia adelante / atrás) en Chrome.

Además de lo que Sim proporcionó, ¿mi caso de uso requería que los detalles se combinaran con el botón Borrar formulario en la parte posterior? .

Descubrí que la mejor manera de hacerlo es permitir que la forma se comporte como espera y desencadenar un evento:

$(window).bind("pageshow", function() {
    var form = $(''form''); 
    // let the browser natively reset defaults
    form[0].reset();
});

Si no está manejando los eventos de input para generar un objeto en JavaScript, o algo más, entonces está listo. Sin embargo, si está escuchando los eventos, al menos en Chrome necesita activar usted mismo un evento de change (o cualquier evento que desee manejar, incluido uno personalizado):

form.find('':input'').not('':button,:submit,:reset,:hidden'').trigger(''change'');

Eso se debe agregar después del reset para hacer algo bueno.

Answer 5

Otra forma sin JavaScript es utilizar <form autocomplete="off"> para evitar que el navegador vuelva a llenar el formulario con los últimos valores.

Ver también esta pregunta

Probado esto solo con un único <input type="text" > dentro del formulario, pero funciona bien en Chrome y Firefox actuales, desafortunadamente no en IE10.

Answer 6

Si necesita compatibilidad con navegadores más antiguos, la opción "pageshow" podría no funcionar. El siguiente código funcionó para mí.

$(window).load(function() {
    $(''form'').get(0).reset(); //clear form data on page load
});