这是我正在使用的，把所有这些代码放在一个单独的JS文件中，并加载到您的头文件中，这样您就不需要一次又一次地复制：

var unsaved = false;

$(":input").change(function(){ //triggers change in all input fields including text type
    unsaved = true;
});
        
function unloadPage(){ 
    if(unsaved){
        return "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;

未找到$的编辑：

此错误只能由以下三种情况之一引起：

1. JavaScript文件未正确加载到页面中
   1.你有一个拙劣的jQuery版本，这可能是因为有人编辑了核心文件，或者插件覆盖了$变量。
   1.在页面完全加载之前运行JavaScript，因此在jQuery完全加载之前运行JavaScript。
   确保所有的JS代码都被放置在这个：

$(document).ready(function () {
  //place above code here
});

编辑保存/发送/提交按钮例外

$('#save').click(function() {
    unsaved = false;
});

编辑以使用动态输入

// Another way to bind the event
$(window).bind('beforeunload', function() {
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
});

// Monitor dynamic inputs
$(document).on('change', ':input', function(){ //triggers change in all input fields including text type
    unsaved = true;
});

将上述代码添加到alert_unsaved_changes. js文件中。

使用以下形式序列化的版本：
当dom就绪时，执行以下代码：

// Store form state at page load
var initial_form_state = $('#myform').serialize();

// Store form state after form submit
$('#myform').submit(function(){
  initial_form_state = $('#myform').serialize();
});

// Check form changes before leaving the page and warn user if needed
$(window).bind('beforeunload', function(e) {
  var form_state = $('#myform').serialize();
  if(initial_form_state != form_state){
    var message = "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    e.returnValue = message; // Cross-browser compatibility (src: MDN)
    return message;
  }
});

如果用户更改字段，然后手动回滚，则不会显示警告

• change* 事件在用户模糊输入时触发，而不是在输入的每个字符上。

如果你需要它在每次更改时被调用（即使焦点仍然在输入字段中），你将不得不依靠 keyup 和一堆事件的组合来跟踪只使用鼠标的粘贴/剪切。
我希望你知道你的方法来检测变化是不是最好的一个？如果用户输入一些文本，离开字段，然后恢复更改脚本仍然会提醒他修改文本。

你应该为输入和文本区域注册事件，如果你指的是文本区域和文本框。你可以为isChange使用keyup，这样你就不用等待用户模糊这个区域。

$("input[type='text'], textarea").keyup(function () {
    isChange = true;
})

为什么不简单地将事件绑定到change回调呢？

$(":input").change(function()
{
    $(window).unbind('unload').bind('unload',function()
    {
        alert('unsaved changes on the page');
    });
});

作为额外的好处，您可以使用confirm并选择触发更改事件的最后一个元素：

$(":input").change(function()
{
    $(window).unbind('unload').bind('unload',(function(elem)
    {//elem holds reference to changed element
        return function(e)
        {//get the event object:
            e = e || window.event;
            if (confirm('unsaved changes on the page\nDo you wish to save them first?'))
            {
                elem.focus();//select element
                return false;//in jQuery this stops the event from completeing
            }
        }
    }($(this)));//passed elem here, I passed it as a jQ object, so elem.focus() works
    //pass it as <this>, then you'll have to do $(elem).focus(); or write pure JS
});

如果你有一些保存按钮，确保它解除unload事件的绑定：

$('#save').click(function()
{
    $(window).unbind('unload');
    //rest of your code here
});

这实际上只是@AlphaMale答案的不同版本，但在几个方面有所改进：

# Message displayed to user. Depending on browser and if it is a turbolink,
# regular link or user-driven navigation this may or may not display.
msg = "This page is asking you to confirm that you want to leave - data you have entered may not be saved."

# Default state
unsaved = false

# Mark the page as having unsaved content
$(document).on 'change', 'form[method=post]:not([data-remote]) :input', -> unsaved = true

# A new page was loaded via Turbolinks, reset state
$(document).on 'page:change', -> setTimeout (-> unsaved = false), 10

# The user submitted the form (to save) so no need to ask them.
$(document).on 'submit', 'form[method=post]', ->
  unsaved = false
  return

# Confirm with user if they try to go elsewhere
$(window).bind 'beforeunload', -> return msg if unsaved

# If page about to change via Turbolinks also confirm with user
$(document).on 'page:before-change', (event) ->
  event.preventDefault() if unsaved && !confirm msg

这在以下方面更好：

• 这是咖啡脚本，IMHO自动使它更好。：）
• 它完全基于事件冒泡，所以动态内容是自动处理的（@AlphaMale的更新也有这个功能）。
• 它只在POST表单上运行，因为GET表单没有我们通常希望避免丢失的数据（即GET表单往往是搜索框和过滤条件）。
• 它不需要绑定到一个特定的按钮来执行保存。任何时候提交表单，我们都认为提交是在保存。
• 它是Turbolinks兼容的，如果你不需要，只需要删除两个page:事件绑定。
• 它的设计，使您可以只包括它与其余的JS和您的整个网站将受到保护。

我使用$('form').change等函数来设置一个脏位变量。不适合捕捉所有的变化（根据前面的答案），但捕捉所有我感兴趣的，在我的应用程序。