0

Tenho uma página HTML que possui um formulário. Preciso impedir que, após o usuário preencha esse formulário, ele clique em outro botão qualquer da página que não seja o "Salvar".

Encontrei um script que resolveu isso, porém ele pode ser burlado facilmente. Nesse script, aparece um dialog padrão do navegador, e nesse dialog possui uma checkbox onde o usuário pode marcar para que a página não crie novas dialogs. Após testar, vi que quando se marca essa checkbox, o script não funciona mais e o usuário consegue sair da página sem salvar o formulário.

Abaixo o script que usei:

var init_form = $('#processosForm').serialize();

$(':submit').click(function() {
  window.onbeforeunload = null;
});

window.onbeforeunload = function(){
  var check_form = $('#id_form').serialize();
  if( check_form === init_form )
        return null;
  return 'Os dados alterados ainda não foram salvos, deseja permanecer nesta página?';
};

Gostaria de saber alguma outra forma de se ter esse mesmo resultado, porém sem a possibilidade do usuário burlar. A alternativa pode ser em javascript puro... ou jquery... não tenho restrições em relação à isso.

A minha ideia é criar um modal (Jquery ou Bootstrap) e quando o usuário clicar em qualquer outro botão da tela que não seja o "salvar", esse modal apareceria. A estrutura do modal seria basicamente assim:

<!-- Modal -->
<div class="modal fade" id="confirmaSaida" role="dialog">
 <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Tem certeza de que deseja sair dessa tela?</h4>
    </div>
    <div class="modal-body">
    Você tem dados que ainda não foram salvos. Clique em "Salvar" antes de sair dessa página.
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Sair sem salvar</button>
    </div>
  </div>

</div>

O problema é: como fazer esse modal aparecer quando o usuário clicar noutros botões da tela?

5
  • 1
    Esse dialog que aparece é a segurança do navegador para os sites não atrapalharem os usuários. Não tem como bloquear 100%, ele vai no gerenciador de tarefa e mata o processo, a maquina é dele e ele é o adm, sempre tem um jeito. Até pode ter como bloquear mais alem do que você faz, eu não saberia dizer qual seria.
    – Ricardo
    Commented 6/01/2016 às 17:07
  • Entendi. O que eu queria era algo utilizando um modal ou um dialog, por exemplo os da biblioteca jquery ou do bootstrap, que eu mesmo configure... Esses eu acho que o usuário não tem como burlar, mas não sei como fazer... Commented 6/01/2016 às 17:10
  • Você já chegou a tentar usar? Seriá legal colocar o código de uma tentativa, já ajudaria a responderem.
    – Ricardo
    Commented 6/01/2016 às 17:17
  • Eu sei montar o modal no HTML, o problema é fazer ele aparecer quando o usuário clicar em qualquer outro botão que não seja o salvar. Isso eu não sei nem começar... Commented 6/01/2016 às 17:34
  • Adicionei na questão a estrutura do modal para ver se ajuda a solucionar a questão. Commented 6/01/2016 às 17:40

1 Resposta 1

1

Não tem como impedir que o usuário saia do seu site, pois isso faria com que o navegador parasse de responder. A única forma de travar a execução do navegador é com a janela de diálogo nativa do navegador - e todos os navegadores mais recentes possuem a opção de desabilitar por segurança (para evitar abusos).

A ação é assim: O usuário solicita sair da página => a função de saída onbeforeunload é acionada, o valor de retorno dentro dessa função define a mensagem do diálogo de confirmação de saída.

O que pode ser feito é um loop infinito na função onbeforeunload para que ela não retorne, mas em navegadores seguros apenas a aba ficará travada, e ainda será possível fechar forçadamente a aba travada.

2
  • Impedir que ele saia do site, eu entendo que não é possível. Mas e dele clicar em algum link do meu próprio site, isso é possível? Por exemplo, ele está na página do formulário, preenche algo e não salva, e então clica no menu do próprio site pra mudar de página. Nessa situação, é possível impedir? Commented 8/01/2016 às 17:40
  • 1
    Sim, nesse caso você poderia adicionar um evento click a todos os links: $('a').click(callback); callback seria uma função que recebe um event. event é um objeto com a função preventDefault() que serve para evitar que a ação do click continue. Commented 9/01/2016 às 11:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .