Arquivo

Textos com Etiquetas ‘Confirmação’

Um objeto JavaScript para confirmar se o usuário quer sair da página

29 de novembro de 2010

Existe algumas situações que é interessante confirmar se usuário realmente quer deixar a página atual. O usuário pode sair acidentalmente sem salvar o que está editando ou quando o fluxo de edição de conteúdo da página é complexo que pode induzir o usuário a não salvar no final.

Por exemplo, no WordPress que uso nesse blog aparece uma confirmação se eu tento sair da página de edição de post sem ter salvo antes:

Clique na imagem para ampliá-la

Clique na imagem para ampliá-la

O segredo é configurar o evento onbeforeunload do objeto window com uma função que retorna o texto da confirmação:

<html>
<head>
  <script>
    window.onbeforeunload = function() {
      return "Minha mensagem de confirmação.";
    }
  </script>
</head>
<body>

</body>
</html>

Abordagem procedural

O ideal é podermos configurar se a mensagem de confirmação irá aparecer ou não, conforme as ações do usuário na página. Vamos criar uma variável que servirá como condição se a mensagem de confirmação será exibida.

<html>
<head>
  <script>
    var needToConfirm = false;

    window.onbeforeunload = function() {
      if (needToConfirm) {
        return "Minha mensagem de confirmação.";
      }
    }
  </script>
</head>
<body>
  <form onsubmit="needToConfirm = false;">
    <p><input type="text" onchange="needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

O código acima exemplifica a ativação e a desativação da exibição da mensagem de confirmação na saída da página em um formulário. Toda a vez que o valor do campo texto for alterado (linha 15), a variável needToConfirm é configurada para true. Já na submissão do formulário (linha 14) a confirmação é desativa.

Usando orientação a objetos

Agora vamos extrair essa funcionalidade para uma objeto JavaScript, salvando o código em um arquivo .js.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

O objeto ExitPageConfirmer recebe como parâmetro no seu construtor a mensagem de confirmação. Por padrão, a necessidade de exibir a confirmação é configurada para false. Veja um exemplo de sua utilização:

var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");

E quando quiser ativar a exibição da mensagem de confirmação:

exitPage.needToConfirm = true;

Vamos utilizar nosso confirmador de saída de página no formulário HTML do exemplo anterior:

<html>
<head>
  <script src="scripts/Prodis.ExitPageConfirmer.js"></script>
  <script>
    var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");
  </script>
</head>
<body>
  <form onsubmit="exitPage.needToConfirm = false;">
    <p><input type="text" onchange="exitPage.needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

Na linha 3 fizemos a referência para o arquivo .js que contém o código do confirmador e criamos uma instância de ExitPageConfirmer na linha 5. Nas linhas 9 e 10 configuramos a necessidade de exibir ou não a mensagem de confirmação utilizando usando a variável exitPage.

Detalhe sobre a implementação

Há um detalhe interessante sobre a implementação do objeto ExitPageConfirmer. Vamos ver o código novamente para ficar mais fácil de visualizar.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

Na linha 3 é criada a variável myself que recebe o valor de this. O this nesse escopo se refere à instância do objeto. Por exemplo, quando criamos a variável exitPage no código do formulário, o this dentro do objeto se refere a essa variável.

Dentro da função que é passada para o evento onbeforeunload do objeto window existe um if verificando o valor de needToConfirm do próprio objeto ExitPageConfirmer. Isso serve de condição para exibir a mensagem confirmação.

Mas por que não usamos this.needToConfirm ao invés de myself.needToConfirm na linha 8?

Acontece que a partir do momento que estamos configurando algo dentro do objeto window, o this se refere ao objeto window e não mais ao objeto ExitPageConfirmer. Sendo assim, criamos a variável myself que recebe uma referência da instância atual do objeto ExitPageConfirmer.

Como a variável myself fica disponível também no escopo da função que é atribuída ao evento onbeforeunload do objeto window, podemos utilizá-la sem problemas.

O escopo da variável myself se limita ao construtor de ExitPageConfirmer, então a mesma não pode ser acessada de fora do objeto.

Conclusão

O objeto ExitPageConfirmer pode ser utilizado em qualquer página, evitando assim a duplicidade de código. Além disso, o uso de programação orientada a objetos em JavaScript, ao invés de abordagem procedural, torna o código mais elegante e fácil de manter.

O código completo você encontra aqui no meu Github.

Referência:
Asking Users To Confirm If They Wish To Leave The Page

JavaScript , , , , ,