19.02.2025

Limpando Campos de Formulário ao Usar o Botão Voltar do Navegador

Resposta Rápida

Se você navegou de volta para uma página de formulário usando o botão "voltar" no seu navegador e os dados nos campos permanecem inalterados, existe uma forma de resolver esse problema. Basta adicionar o seguinte código ao seu HTML, que utiliza o evento load em JavaScript e o objeto performance.navigation. Nenhuma ação adicional é necessária por parte do usuário.

window.addEventListener('load', () => {
  if (performance.navigation.type === 2) {
    document.querySelector('form').reset();
  }
});

Esse script irá limpar automaticamente os campos do seu formulário.

Gerenciando Autocompletar do Navegador e Navegação de Paginas

Desabilitando o Autocompletar

Os navegadores frequentemente salvam informações inseridas em formulários e preenchem automaticamente os campos quando a página é recarregada. Para evitar esse comportamento, utilize o atributo <form autocomplete="off">. Isso fará com que o navegador "ignore" os dados do formulário.

Usando o Evento "pageshow"

Os navegadores armazenam em cache as páginas para um carregamento mais rápido e normalmente mostram uma versão em cache da página ao navegar para trás, evitando um recarregamento completo. Nesses casos, o evento pageshow é bastante útil.

window.addEventListener('pageshow', (event) => {
  if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
    document.querySelector('form').reset();
  }
});

Independentemente de a página ser recarregada ou carregada do cache, esse código limpará os campos do formulário.

Limpando Campos de Entrada Desativados

Se o seu formulário possui campos desativados com dados gerados automaticamente que não devem ser reenviados:

Array.from(document.querySelectorAll('form input[disabled]')).forEach(input => input.value = '');

Esse código limpará os campos desativados, deixando-os vazios.

Forçando Recarregamento do Servidor

Para garantir que a página seja carregada do servidor todas as vezes, utilize window.performance.navigation.type. Isso ajudará a evitar problemas com o reenvio do formulário.

Visualização

Imagine os campos de formulário como elementos de uma casa:

Quando você sai de casa (🏡), seu confiável aspirador robô (🤖) mantém tudo em ordem, e você retorna a um estado limpo (campos de formulário vazios).

O botão "voltar" no navegador é seu aspirador robô, enquanto os campos de formulário representam sua casa.

🌐 Botão Voltar = 🤖 Aspirador Robô
📝 Campos de Formulário = 🏡 Casa

Objetivo: Garantir que nosso cuidadoso aspirador robô sempre mantenha a casa em ordem quando saímos e voltamos.

Ao clicar em "Voltar":
🏡 (Antes) [🛋️🛏️🪑]
🤖 → 🌐
🏡 (Depois) [ ]

Gerenciando Compatibilidade entre Navegadores e Eventos do Usuário

Tratando Eventos do Usuário

Se os campos do formulário estão associados a eventos que devem ocorrer com suas alterações:

$('form').trigger('reset').find(':input').trigger('change');

Isso irá atualizar o formulário, acionando eventos de mudança.

Testando em Diferentes Navegadores

Assim como os gostos para pizza variam, as funcionalidades dos navegadores também são diferentes. Lembre-se de testar o código no Chrome, Firefox e Safari para observar seu comportamento.

Limitações da Navegação

Como em qualquer jogo, não existe uma solução única que funcione para todos. Diferentes navegadores têm regras diferentes. É como um jogo de bingo com cartas exclusivas.

Monitoramento Contínuo

Assim como os usuários de notebook não se cansam de rolar para baixo, os desenvolvedores não devem se cansar de testar. Implemente, verifique, teste e comece tudo de novo.

Recursos Úteis

Abaixo está uma lista de recursos que o ajudará a "ajustar" seu formulário para um reset adequado.

1. Padrão HTML - Descrição do Autocompletar em Formulários
2. MDN - O Atributo 'autocomplete'
3. Resetando Formulário de Várias Etapas com jQuery - Stack Overflow
4. MDN - Evento da Janela: beforeunload
5. MDN - Propriedade da Janela: history
6. Padrão Post/Redirect/Get - Wikipedia
7. Exemplo de Uso do Padrão Post-Redirect-Get em PHP - Stack Overflow

Video

Navigation