Limpe todos os campos de um formulário ao voltar com o botão Voltar do navegador

Preciso de uma maneira de limpar todos os campos de um formulário quando um usuário usa o botão Voltar do navegador. Agora, o navegador lembra todos os últimos valores e os exibe quando você volta.

Mais esclarecimentos sobre por que preciso disso. Eu tenho um campo de entrada desativado cujo valor é gerado automaticamente usando um algoritmo para torná-lo único dentro de um determinado grupo de dados. Depois de enviar o formulário e os dados serem inseridos no banco de dados, o usuário não poderá usar o mesmo valor novamente para enviar o mesmo formulário. Portanto, desativei o campo de entrada em primeiro lugar. Mas se o usuário usar o botão Voltar do navegador, o navegador se lembra do último valor e o mesmo valor é retido no campo de entrada. Portanto, o usuário pode enviar o formulário com o mesmo valor novamente.

O que não entendo é o que exatamente acontece quando você pressiona o botão Voltar do navegador. Parece que a página inteira é recuperada do cache sem nunca entrar em contato com o servidor se o tamanho da página estiver dentro do limite do cache do navegador. Como posso garantir que a página seja carregada do servidor, independentemente da configuração do navegador, quando você pressiona o botão Voltar do navegador?

Os navegadores modernos implementam algo conhecido como cache back-forward (BFCache). Quando você clica no botão voltar / avançar, a página real não é recarregada (e os scripts nunca são executados novamente).

Se você tiver que fazer algo no caso de o usuário pressionar as teclas voltar / avançar - ouça BFCache pageshowe pagehideeventos:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Veja mais detalhes para implementações Gecko e WebKit .

Outra forma sem JavaScript é <form autocomplete="off">evitar que o navegador preencha novamente o formulário com os últimos valores.

Veja também esta questão

Testei isso apenas com um único <input type="text"> dentro do formulário, mas funciona bem no Chrome e Firefox atuais, infelizmente não no IE10.

Me deparei com este post enquanto procurava uma maneira de limpar todo o formulário relacionado ao BFCache (cache do botão voltar / avançar) no Chrome.

Além do que o Sim forneceu, meu caso de uso exigia que os detalhes precisassem ser combinados com Limpar formulário no botão Voltar? .

Descobri que a melhor maneira de fazer isso é permitir que o formulário se comporte conforme o esperado e acionar um evento:

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

Se você não está manipulando os inputeventos para gerar um objeto em JavaScript, ou qualquer outra coisa nesse sentido, está tudo pronto. No entanto, se você estiver ouvindo os eventos, então pelo menos no Chrome você precisa acionar um changeevento você mesmo (ou qualquer evento que você queira controlar, incluindo um personalizado):

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

Isso deve ser adicionado após o resetpara fazer algum bem.

Se precisar de compatibilidade com navegadores mais antigos, a opção "pagehow" pode não funcionar. O código a seguir funcionou para mim.

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

Isto é o que funcionou para mim.

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

Eu tinha isso inicialmente na $(document).readyseção do meu jquery, que também funcionou. No entanto, ouvi dizer que nem todos os navegadores são acionados $(document).readyao pressionar o botão Voltar, então o retirei. Não sei os prós e contras dessa abordagem, mas testei em vários navegadores e em vários dispositivos, e nenhum problema foi encontrado com esta solução.

Os links abaixo podem ajudá-lo ..

O botão Voltar do navegador restaura campos vazios . Limpar formulário no botão Voltar?

Espero que isso ajude ... Boa sorte