Предупредить пользователя перед тем, как покинуть веб-страницу с несохраненными изменениями

У меня есть несколько страниц с формами в моем приложении.

Как я могу защитить форму таким образом, чтобы, если кто-то уходит или закрывает вкладку браузера, ему было предложено подтвердить, что он действительно хочет оставить форму с несохраненными данными?

Короткий, неправильный ответ:

Вы можете сделать это, обработав beforeunloadсобытие и вернув ненулевую строку :

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.
});

Проблема этого подхода заключается в том, что отправка формы также запускает событие unload . Это легко исправить, добавив флаг, которым вы отправляете форму:

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.
    });
};

Затем вызывая сеттер при отправке:

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

Но читайте дальше ...

Длинный правильный ответ:

Вы также не хотите показывать это сообщение, когда пользователь ничего не изменил в ваших формах . Одним из решений является использование beforeunloadсобытия в сочетании с «грязным» флагом, который вызывает запрос только в том случае, если он действительно актуален.

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.
    });
};

Сейчас для реализации isDirtyметода существуют различные подходы.

Вы можете использовать jQuery и сериализацию форм , но у этого подхода есть некоторые недостатки. Сначала вам нужно изменить код, чтобы он работал в любой форме ( $("form").each()будет работать), но самая большая проблема заключается в том, что jQuery serialize()будет работать только с именованными, не отключенными элементами, поэтому изменение любого отключенного или безымянного элемента не вызовет грязный флаг. Для этого есть обходные пути , такие как создание элементов управления только для чтения вместо включения, сериализации и повторного отключения элементов управления.

Таким образом, события, кажется, путь. Вы можете попробовать прослушивать нажатия клавиш . Это событие имеет несколько проблем:

• Не будет вызывать флажки, переключатели или другие элементы, которые изменяются с помощью мыши.
• Сработает для нерелевантных нажатий клавиш, таких как Ctrlклавиша.
• Не будет срабатывать при значениях, установленных через код JavaScript.
• Не будет запускаться при вырезании или вставке текста через контекстные меню.
• Не будет работать для виртуальных входов, таких как указатели даты или флажки / кнопки-переключатели, которые сохраняют свои значения в скрытом вводе через JavaScript.

changeСобытие также не вызывает на значениях , установленных в коде JavaScript , так и не будет работать для виртуальных входов.

Привязка inputсобытия ко всем inputs (и textareas и selects) на вашей странице не будет работать в старых браузерах и, как и все упомянутые выше решения по обработке событий, не поддерживает отмену. Когда пользователь изменяет текстовое поле, а затем отменяет его, или устанавливает и снимает флажок, форма все еще считается грязной.

А когда вы захотите реализовать больше поведения, например игнорировать определенные элементы, у вас будет еще больше работы.

Не изобретай велосипед

Поэтому, прежде чем задуматься о реализации этих решений и всех необходимых обходных путей, поймите, что вы заново изобретаете колесо и вы склонны сталкиваться с проблемами, которые другие для вас уже решили.

Если ваше приложение уже использует jQuery, вы также можете использовать проверенный, поддерживаемый код вместо собственного и использовать библиотеку третьей стороны для всего этого. JQuery вы уверены? Плагин прекрасно работает, смотрите их демонстрационную страницу . Это так просто, как это:

<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>

Пользовательские сообщения не поддерживаются везде

Обратите внимание, что Firefox 4 не поддерживает пользовательские сообщения в этом диалоговом окне. По состоянию на апрель 2016 года развернут Chrome 51, в котором также удаляются пользовательские сообщения .

На этом сайте есть другие альтернативы, но я думаю, что такой диалог достаточно ясен:

Вы хотите покинуть этот сайт?

Внесенные вами изменения не могут быть сохранены.

Leave Stay

Проверьте событие JavaScript onbeforeunload . Это нестандартный JavaScript, представленный Microsoft, однако он работает в большинстве браузеров, и их документация onbeforeunload содержит больше информации и примеров.

через 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.
});

Вы можете использовать функцию Google JQuery Form Serialize, которая соберет все входные данные формы и сохранит их в массиве. Я думаю, этого объяснения достаточно :)

Универсальное решение, не требующее настройки, которое автоматически обнаруживает все входные изменения, включая contenteditable элементы:

"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;
    }
});
})();

Построенный на основе отличной идеи Васима А. использовать сериализацию. Проблема заключалась в том, что предупреждение также отображалось при отправке формы. Это было исправлено здесь.

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.'
        }
    });
})

Он был протестирован в Chrome и IE 11.

Основываясь на предыдущих ответах и ​​собранных вместе из разных мест переполнения стека, вот решение, которое я придумал, которое обрабатывает случай, когда вы действительно хотите отправить свои изменения:

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;

Стоит отметить, что IE11, похоже, требует, чтобы closeEditorWarningфункция возвращалась, undefinedчтобы не показывать предупреждение.

Следующая однострочная работа сработала для меня.

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

Просто установите modifiedв истинно или ложно в зависимости от состояния приложения.

Следующий код прекрасно работает. Вам нужно достичь изменений ввода элементов формы через атрибут 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;

Вы можете использовать serialize () для создания текстовой строки в кодировке URL-адреса путем сериализации значений формы и проверки, изменилась ли форма перед загрузкой.

$(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?'
    }
})

Перейдите по этой ссылке https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form Автор сценария Владимир Сидоренко

В добавление к идее @codecaster вы можете добавить это на каждую страницу с формой (в моем случае я использую ее глобально, так что только в формах будет это предупреждение) измените его функцию на

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

Также добавьте формы отправки, включая логин и ссылки для отмены, чтобы при нажатии кнопки «Отмена» или «Отправить» форма не вызывала предупреждение также на каждой странице, где есть форма ...

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

Вы можете проверить подробное объяснение здесь: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ сравнение значений формы при загрузке и -перед-близко

Основной код:

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
    }

Короткий ответ:

let pageModified = true

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

Решение от 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.'
        }
    });
})

... спонтанно выполнил эту работу для меня в сложной объектно-ориентированной обстановке без каких-либо изменений.

Единственное изменение, которое я применил, состояло в том, чтобы ссылаться на конкретную форму (только одну форму на файл), называемую «formForm» («form» -> «#formForm»):

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

Особенно хорошо сделано то, что кнопка отправки «оставлена ​​в покое».

Кроме того, он работает и для меня с последней версией Firefox (по состоянию на 7 февраля 2019 года).

Протестировал универсальное решение Eli Grey, сработало только после того, как я упростил код до

  '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;
      }
    });

  })();

Модификации его удаляются использованием target[defaultValue]и только использованиемtarget.dataset[defaultValue] для хранения реального значения по умолчанию.

И я добавил «сохраненный» прослушиватель событий, где «сохраненное» событие будет вызвано вами самостоятельно при успешном сохранении.

Но это «универсальное» решение работает только в браузерах, но не работает в веб-обозрении приложения, например, wechat-браузерах.

Чтобы заставить его работать в браузерах wechat (частично), еще одно улучшение:

  '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");
    }
  })();

Я сделал это по-другому, поделившись здесь, чтобы кто-то мог получить помощь, протестирован только с Chrome.

Я хотел предупредить пользователя перед закрытием вкладки, только если есть какие-то изменения.

<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.";
    }        
};

Работает хорошо, но есть другая проблема: когда я отправляю форму, я получаю нежелательное предупреждение, я вижу много обходных путей, это происходит потому, что onbeforeunload срабатывает перед отправкой, поэтому мы не можем обработать его в событии onsubmit, как onbeforeunload = null, но Событие onclick кнопки отправки срабатывает перед обоими этими событиями, поэтому я обновил код

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;
});

Прежде всего, большинство браузеров имеет эту функцию по умолчанию. А зачем тебе это вообще? Почему бы не сохранить форму синхронизированной? Я имею в виду, сохранить его на любое изменение, не дожидаясь отправки от пользователя. Как это делают контакты Google. Конечно, если только все поля в форме являются обязательными. Пользователям не нравится, когда они заставляют что-то заполнять без возможности уйти, чтобы подумать, нужно ли им это. :)