Exibir a mensagem Você tem certeza que quer sair da página?

Neste artigo você vai aprender a como exibir a mensagem Você tem certeza que quer sair da página? com JavaScript

Fala programador(a), beleza? Bora aprender mais sobre as mensagens de tela com JavaScript!

Se quisermos exibir uma mensagem ao usuário perguntando se ele tem certeza que quer sair da página após preencher os dados, podemos utilizar o evento beforeunload do objeto Window.

Ele é acionado quando o usuário tenta sair da página, seja por meio de um clique em um link, um redirecionamento ou até mesmo ao atualizar a página.

Para exibir a mensagem para o usuário, basta retornarmos a mensagem desejada como string na função de callback do evento. Por exemplo:

window.addEventListener("beforeunload", (event) => {
  event.preventDefault();
  event.returnValue = "Você tem certeza que quer sair dessa página?";
});

Nesse exemplo, utilizamos o método addEventListener para adicionar um listener para o evento beforeunload.

Em seguida, definimos uma função de callback que recebe um evento como parâmetro. Utilizamos o método preventDefault para cancelar o comportamento padrão do evento e o atribuímos a mensagem desejada à propriedade returnValue do evento.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Ao sair da página, o navegador exibirá a mensagem para o usuário e aguardará a confirmação ou cancelamento da ação.

Se o usuário confirmar, a página será fechada. Se o usuário cancelar, a página continuará aberta.

É importante lembrar que essa funcionalidade pode ser bloqueada pelos navegadores, então não podemos garantir que a mensagem será exibida em todos os casos.

Além disso, essa abordagem pode ser considerada um pouco invasiva pelos usuários, então é importante utilizá-la com moderação.

Outra forma de exibir a mensagem

Uma outra forma de exibir a mensagem “Você tem certeza que quer sair dessa página?” ao usuário é utilizando o método confirm do objeto Window.

Ele exibe uma caixa de diálogo com uma mensagem e dois botões “OK” e “Cancelar”.

O usuário pode escolher entre os dois botões e a função retorna true se o usuário escolher “OK” e false se escolher “Cancelar”.

Por exemplo:

const sairDaPagina = () => {
  return window.confirm("Você tem certeza que quer sair dessa página?");
};

document.querySelector("a").addEventListener("click", (event) => {
  if (!sairDaPagina()) {
    event.preventDefault();
  }
});

Nesse exemplo, criamos uma função chamada sairDaPagina que exibe a mensagem para o usuário e retorna o resultado da escolha.

Em seguida, adicionamos um listener para o evento click de todos os links da página.

Quando o usuário clicar em um link, chamamos a função sairDaPagina.

Se o usuário escolher “Cancelar”, utilizamos o método preventDefault para cancelar o comportamento padrão do evento e evitar que o usuário saia da página.

Essa é uma forma mais simples de exibir a mensagem para o usuário, mas ela também pode ser considerada invasiva pelos usuários.

Além disso, ela só funciona para links e não para outras ações que possam causar a saída da página, como atualização ou redirecionamento.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como criar a funcionalidade de exibir a mensagem Você tem certeza que quer sair desta página?

Utilizamos JavaScript puro para isso, porém lembre-se que alguns navegadores podem não aceitar este código

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Por que aparece uma mensagem genérica e não o meu texto?

Aqui mora uma confusão comum

Você escreve um texto bonito no returnValue, testa e o navegador mostra uma mensagem padrão dele, tipo "As alterações que você fez talvez não sejam salvas"

Calma, não é bug no seu código

Os navegadores modernos ignoram o texto customizado no beforeunload de propósito, por segurança, pra ninguém usar esse aviso pra enganar o usuário

Então a regra é simples: o beforeunload serve pra DISPARAR o aviso de saída, mas quem decide o texto é o navegador

Se você precisa MESMO do seu texto exato, o caminho é o confirm, que a gente vê logo abaixo

Avisar só quando o usuário mexeu no formulário:

Mostrar o aviso em TODA saída irrita

O ideal é avisar só quando tem dado não salvo, beleza?

A sacada é guardar um estado de "mexeu ou não" e só registrar o beforeunload quando fizer sentido

let formularioAlterado = false;

document.querySelector("form").addEventListener("input", () => { formularioAlterado = true; });

window.addEventListener("beforeunload", (event) => { if (formularioAlterado) { event.preventDefault(); event.returnValue = ""; } });

Assim o aviso só aparece se o usuário realmente digitou algo e ainda não salvou

Quando você salvar o formulário com sucesso, é só voltar formularioAlterado pra false e o aviso não incomoda mais

Como remover o aviso de saída:

Em algum momento você vai querer DESLIGAR o aviso, por exemplo depois que o usuário salvou tudo

Pra isso a função de callback precisa estar numa variável, e aí você usa o removeEventListener

const avisarSaida = (event) => { event.preventDefault(); event.returnValue = ""; };

window.addEventListener("beforeunload", avisarSaida);

// quando não quiser mais o aviso: window.removeEventListener("beforeunload", avisarSaida);

Detalhe importante: se você registrar o listener com uma função anônima direto, não tem como remover depois

Por isso guardamos ela na variável avisarSaida, aí dá pra tirar quando quiser

Perguntas frequentes:

Dá pra personalizar o texto do aviso do beforeunload?

Na prática não

Os navegadores atuais mostram uma mensagem padrão deles e ignoram o texto que você coloca no returnValue

Se precisa do seu texto exato, use o confirm, que exibe a mensagem do jeito que você escreveu

Qual a diferença entre beforeunload e confirm?

O beforeunload dispara sozinho quando o usuário tenta sair (fechar aba, atualizar, sair da página), mas o texto é controlado pelo navegador

O confirm é uma caixa que VOCÊ chama na hora que quiser (por exemplo no clique de um link) e o texto é totalmente seu, porém ele não pega atualização nem fechamento de aba

O aviso funciona em todos os navegadores?

O comportamento pode variar e alguns navegadores bloqueiam ou limitam o aviso

Outro ponto: em vários navegadores o aviso só dispara se o usuário tiver interagido com a página antes, então teste sempre com uma interação real