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

Проверьте 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.
});

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

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

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 to правда или false в зависимости от состояния приложения.

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

универсальное решение, не требующее настройки, которое автоматически обнаруживает все изменения ввода, включая 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);
    }
});
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;
    }
});
})();

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

let pageModified = true

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

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

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.

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

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

также поставить на формы отправить в том числе войти и в кнопки отмены ссылки, так что когда человек нажимает отмена или отправить форму не вызовет предупреждение также на каждой странице witouth форму...

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

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