Avisar o usuário antes de sair da página da Web com alterações não salvas

Eu tenho algumas páginas com formulários no meu aplicativo.

Como posso proteger o formulário de tal maneira que, se alguém navegar ou fechar a guia do navegador, será solicitado que você confirme que realmente deseja deixar o formulário com dados não salvos?

Resposta curta e errada:

Você pode fazer isso manipulando o beforeunloadevento e retornando uma sequência não nula :

window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = 'It looks like you have been editing something. '
                            + 'If you leave before saving, your changes will be lost.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});

O problema dessa abordagem é que o envio de um formulário também está disparando o evento descarregar . Isso é corrigido facilmente adicionando o sinalizador a que você está enviando um formulário:

var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};

Em seguida, ligue para o setter ao enviar:

<form method="post" onsubmit="setFormSubmitting()">     
    <input type="submit" />
</form>

Mas continue a ler ...

Resposta longa e correta:

Você também não deseja mostrar esta mensagem quando o usuário não alterou nada nos seus formulários . Uma solução é usar o beforeunloadevento em combinação com um sinalizador "sujo", que somente aciona o prompt se for realmente relevante.

var isDirty = function() { return false; }

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};

Agora, para implementar o isDirtymétodo, existem várias abordagens.

Você pode usar jQuery e serialização de formulários , mas essa abordagem tem algumas falhas. Primeiro, você precisa alterar o código para funcionar de qualquer forma (o $("form").each()que funcionará), mas o maior problema é que o jQuery serialize()funcionará apenas em elementos nomeados e não desativados; portanto, alterar qualquer elemento desativado ou não nomeado não acionará o sinalizador sujo. Existem soluções alternativas para isso , como fazer controles somente leitura em vez de habilitar, serializar e desabilitar os controles novamente.

Então os eventos parecem o caminho a percorrer. Você pode tentar ouvir as teclas pressionadas . Este evento tem alguns problemas:

• Não será acionado em caixas de seleção, botões de opção ou outros elementos que estão sendo alterados através da entrada do mouse.
• Irá acionar pressionamentos de tecla irrelevantes como a Ctrltecla.
• Não acionará valores definidos pelo código JavaScript.
• Não será acionado ao recortar ou colar texto nos menus de contexto.
• Não funcionará para entradas virtuais, como seletores de datas ou embelezadores de caixa de seleção / botão de rádio, que economizam seu valor em uma entrada oculta por meio de JavaScript.

O changeevento também não dispara nos valores definidos no código JavaScript , também não funciona para entradas virtuais.

Vinculando o inputevento para todos os inputs (e textareas e selects) na sua página não irá funcionar em navegadores mais antigos e, como todas as soluções de tratamento de evento mencionado acima, não suporta desfazer. Quando um usuário altera uma caixa de texto e a desfaz, ou marca e desmarca uma caixa de seleção, o formulário ainda é considerado sujo.

E quando você deseja implementar mais comportamentos, como ignorar certos elementos, terá ainda mais trabalho a fazer.

Não reinvente a roda:

Portanto, antes de pensar em implementar essas soluções e todas as soluções necessárias, perceba que você está reinventando a roda e está propenso a encontrar problemas que outras pessoas já resolveram para você.

Se seu aplicativo já usa jQuery, você também pode usar código testado e mantido em vez de criar o seu próprio e usar uma biblioteca de terceiros para tudo isso. jQuery tem certeza? plugin funciona muito bem, veja sua página de demonstração . É simples assim:

<script src="jquery.are-you-sure.js"></script>

<script>
  $(function() {
    $('#myForm').areYouSure(
      {
        message: 'It looks like you have been editing something. '
               + 'If you leave before saving, your changes will be lost.'
      }
    );
  });

</script>

Mensagens personalizadas não suportadas em qualquer lugar

Observe que o Firefox 4 não suporta mensagens personalizadas nesta caixa de diálogo. A partir de abril de 2016, o Chrome 51 está sendo implementado, no qual as mensagens personalizadas também estão sendo removidas .

Algumas alternativas existem em outras partes deste site, mas acho que uma caixa de diálogo como essa é clara o suficiente:

Deseja sair deste site?

As alterações feitas podem não ser salvas.

Leave Stay

Confira o evento JavaScript onbeforeunload . É um JavaScript não padrão introduzido pela Microsoft, no entanto, funciona na maioria dos navegadores e sua documentação onbeforeunload tem mais informações e exemplos.

via jquery

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Você pode usar a função Serializar formulário do Google JQuery, isso irá coletar todas as entradas do formulário e salvá-lo na matriz. Eu acho que essa explicação é suficiente :)

Solução universal que não requer configuração que detecte automaticamente todas as modificações de entrada, incluindo elementos editáveis ​​por conteúdo:

"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
    const target = evt.target;
    if (!(defaultValue in target || defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
    }
});
// detect input modifications
addEventListener("input", (evt) => {
    const target = evt.target;
    let original;
    if (defaultValue in target) {
        original = target[defaultValue];
    } else {
        original = target.dataset[defaultValue];
    }
    if (original !== ("" + (target.value || target.textContent)).trim()) {
        if (!modified_inputs.has(target)) {
            modified_inputs.add(target);
        }
    } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
    }
});
// clear modified inputs upon form submission
addEventListener("submit", () => {
    modified_inputs.clear();
    // to prevent the warning from happening, it is advisable
    // that you clear your form controls back to their default
    // state after submission
});
// warn before closing if any inputs are modified
addEventListener("beforeunload", (evt) => {
    if (modified_inputs.size) {
        const unsaved_changes_warning = "Changes you made may not be saved.";
        evt.returnValue = unsaved_changes_warning;
        return unsaved_changes_warning;
    }
});
})();

Construído sobre a excelente idéia de Wasim A. de usar serialização. O problema era que o aviso também era mostrado quando o formulário estava sendo enviado. Isso foi corrigido aqui.

var isSubmitting = false

$(document).ready(function () {
    $('form').submit(function(){
        isSubmitting = true
    })

    $('form').data('initial-state', $('form').serialize());

    $(window).on('beforeunload', function() {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
            return 'You have unsaved changes which will not be saved.'
        }
    });
})

Foi testado no Chrome e IE 11.

Com base nas respostas anteriores e reunidas de vários lugares no estouro de pilha, eis a solução que eu criei que lida com o caso quando você realmente deseja enviar suas alterações:

window.thisPage = window.thisPage || {};
window.thisPage.isDirty = false;

window.thisPage.closeEditorWarning = function (event) {
    if (window.thisPage.isDirty)
        return 'It looks like you have been editing something' +
               ' - if you leave before saving, then your changes will be lost.'
    else
        return undefined;
};

$("form").on('keyup', 'textarea', // You can use input[type=text] here as well.
             function () { 
                 window.thisPage.isDirty = true; 
             });

$("form").submit(function () {
    QC.thisPage.isDirty = false;
});
window.onbeforeunload = window.thisPage.closeEditorWarning;

Vale ressaltar que o IE11 parece exigir que a closeEditorWarningfunção retorne undefinedpara não mostrar um alerta.

A seguinte linha funcionou para mim.

window.onbeforeunload = s => modified ? "" : null;

Basta definir modifiedcomo verdadeiro ou falso, dependendo do estado do seu aplicativo.

O código a seguir funciona muito bem. Você precisa acessar as alterações de entrada dos elementos do formulário por meio do atributo id:

var somethingChanged=false;
            $('#managerForm input').change(function() { 
                somethingChanged = true; 
           }); 
            $(window).bind('beforeunload', function(e){
                if(somethingChanged)
                    return "You made some changes and it's not saved?";
                else 
                    e=null; // i.e; if form state change show warning box, else don't show it.
            });
        });

var unsaved = false;
$(":input").change(function () {         
    unsaved = true;
});

function unloadPage() {         
    if (unsaved) {             
        alert("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
    }
} 
window.onbeforeunload = unloadPage;

Você pode usar serialize () para criar uma sequência de texto codificada em URL serializando os valores do formulário e verificar se o formulário foi alterado antes da transferência

$(document).ready(function(){
    var form = $('#some-form'),
        original = form.serialize()

    form.submit(function(){
        window.onbeforeunload = null
    })

    window.onbeforeunload = function(){
        if (form.serialize() != original)
            return 'Are you sure you want to leave?'
    }
})

Consulte este link https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form Escrito por Vladimir Sidorenko

Adicionando à idéia do @codecaster, você pode adicioná-lo a todas as páginas com um formulário (no meu caso, eu o uso de maneira global, para que apenas nos formulários o aviso) altere sua função para

if ( formSubmitting || document.getElementsByTagName('form').length == 0) 

Também envie formulários, incluindo links de login e botões de cancelamento, para que quando a pessoa pressionar cancelar ou enviar o formulário não acionar o aviso também em todas as páginas com um formulário ...

<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>

Você pode verificar uma explicação detalhada aqui: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ comparação-de-forma-valores-em-carga-e -before-close

O código principal:

function formCompare(defaultValues, valuesOnClose) {

    // Create arrays of property names
    var aPropsFormLoad = Object.keys(defaultValues);
    var aPropsFormClose = Object.keys(valuesOnClose);

    // If number of properties is different,
    // objects are not equivalent
    if (aPropsFormLoad.length != aPropsFormClose.length) {
        return false;
    }

    for (var i = 0; i < aPropsFormLoad.length; i++) {
        var propName = aPropsFormLoad[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (defaultValues[aPropsFormLoad]+"" !== valuesOnClose[aPropsFormLoad]+"") {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;

}

//add polyfill for older browsers, as explained on the link above

//use the block below on load
    for(i=0; i < document.forms[0].elements.length; i++){
    console.log("The field name is: " + document.forms[0].elements[i].name +
        " and it’s value is: " + document.forms[0].elements[i].value );
    aPropsFormLoad[i] = document.forms[0].elements[i].value;
    }

//create a similar array on window unload event.

//and call the utility function
    if (!formCompare(aPropsOnLoad, aPropsOnClose))
    {
    //perform action: 
    //ask user for confirmation or
    //display message about changes made
    }

Resposta curta:

let pageModified = true

window.addEventListener("beforeunload", 
  () => pageModified ? 'Close page without saving data?' : null
)

A solução de Eerik Sven Puudist ...

var isSubmitting = false;

$(document).ready(function () {
    $('form').submit(function(){
        isSubmitting = true
    })

    $('form').data('initial-state', $('form').serialize());

    $(window).on('beforeunload', function() {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
            return 'You have unsaved changes which will not be saved.'
        }
    });
})

... fez o trabalho espontaneamente para mim em um cenário complexo orientado a objetos, sem as alterações necessárias.

A única alteração que apliquei foi me referir ao formulário concreto (apenas um formulário por arquivo) chamado "formForm" ('form' -> '#formForm'):

<form ... id="formForm" name="formForm" ...>

Especialmente bem feito é o fato de que o botão enviar está sendo "deixado em paz".

Além disso, ele funciona para mim também com a versão mais recente do Firefox (a partir de 7 de fevereiro de 2019).

Testado a solução universal de Eli Grey, só funcionou depois que simplifiquei o código para

  'use strict';
  (() => {
    const modified_inputs = new Set();
    const defaultValue = 'defaultValue';
    // store default values
    addEventListener('beforeinput', evt => {
      const target = evt.target;
      if (!(defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
      }
    });

    // detect input modifications
    addEventListener('input', evt => {
      const target = evt.target;
      let original = target.dataset[defaultValue];

      let current = ('' + (target.value || target.textContent)).trim();

      if (original !== current) {
        if (!modified_inputs.has(target)) {
          modified_inputs.add(target);
        }
      } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
      }
    });

    addEventListener(
      'saved',
      function(e) {
        modified_inputs.clear()
      },
      false
    );

    addEventListener('beforeunload', evt => {
      if (modified_inputs.size) {
        const unsaved_changes_warning = 'Changes you made may not be saved.';
        evt.returnValue = unsaved_changes_warning;
        return unsaved_changes_warning;
      }
    });

  })();

As modificações nele são excluídas do uso target[defaultValue]e uso exclusivotarget.dataset[defaultValue] para armazenar o valor padrão real.

E eu adicionei um ouvinte de evento 'salvo', onde o evento 'salvo' será acionado por você mesmo em sua ação de salvamento bem-sucedida.

Mas essa solução "universal" funciona apenas em navegadores, não na visualização da web do aplicativo, por exemplo, nos navegadores.

Para fazê-lo funcionar também nos navegadores wechat (parcialmente), outras melhorias:

  'use strict';
  (() => {
    const modified_inputs = new Set();
    const defaultValue = 'defaultValue';
    // store default values
    addEventListener('beforeinput', evt => {
      const target = evt.target;
      if (!(defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
      }
    });

    // detect input modifications
    addEventListener('input', evt => {
      const target = evt.target;
      let original = target.dataset[defaultValue];

      let current = ('' + (target.value || target.textContent)).trim();

      if (original !== current) {
        if (!modified_inputs.has(target)) {
          modified_inputs.add(target);
        }
      } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
      }

      if(modified_inputs.size){
        const event = new Event('needSave')
        window.dispatchEvent(event);
      }
    });

    addEventListener(
      'saved',
      function(e) {
        modified_inputs.clear()
      },
      false
    );

    addEventListener('beforeunload', evt => {
      if (modified_inputs.size) {
        const unsaved_changes_warning = 'Changes you made may not be saved.';
        evt.returnValue = unsaved_changes_warning;
        return unsaved_changes_warning;
      }
    });

    const ua = navigator.userAgent.toLowerCase();

    if(/MicroMessenger/i.test(ua)) {
      let pushed = false

      addEventListener('needSave', evt => {
        if(!pushed) {
          pushHistory();

          window.addEventListener("popstate", function(e) {
            if(modified_inputs.size) {
              var cfi = confirm('确定要离开当前页面嘛？' + JSON.stringify(e));
              if (cfi) {
                modified_inputs.clear()
                history.go(-1)
              }else{
                e.preventDefault();
                e.stopPropagation();
              }
            }
          }, false);
        }

        pushed = true
      });
    }

    function pushHistory() {
      var state = {
        title: document.title,
        url: "#flag"
      };
      window.history.pushState(state, document.title, "#flag");
    }
  })();

Fiz isso de maneira diferente, compartilhando aqui para que alguém possa obter ajuda, testado apenas com o Chrome.

Eu queria avisar o usuário antes de fechar a guia apenas se houver algumas alterações.

<input type="text" name="field" value="" class="onchange" />

var ischanged = false;

$('.onchange').change(function () {
    ischanged = true;
});

window.onbeforeunload = function (e) {
    if (ischanged) {
        return "Make sure to save all changes.";
    }        
};

Funciona bem, mas tenho outro problema. Quando envio o formulário, recebo o aviso indesejado, vi muitas soluções alternativas, isso ocorre porque onbeforeunload dispara antes do onsubmit, é por isso que não podemos lidar com isso no evento onsubmit como onbeforeunload = null, mas O evento onclick do botão enviar é acionado antes desses dois eventos, então atualizei o código

var isChanged = false;
var isSubmit = false;

window.onbeforeunload = function (e) {
    if (isChanged && (!isSubmit)) {
        return "Make sure to save all changes.";
    }        
};

$('#submitbutton').click(function () {
    isSubmit = true;
});

$('.onchange').change(function () {
    isChanged = true;
});

Primeiro de tudo, a maioria dos navegadores tem essa função por padrão. E por que você precisa disso? Por que não manter o formulário sincronizado? Quero dizer, salve-o em qualquer alteração sem esperar nenhum envio do usuário. Como os Contatos do Google fazem. Obviamente, se apenas todos os campos no formulário forem obrigatórios. Os usuários não gostam de quando forçam a preencher algo sem a oportunidade de ir embora para pensar se precisam. :)