警告未保存的更改的forms
我想在主文件中编写Jquery代码，以便如果用户更改页面，并且有任何未保存的更改用户应该得到警报。 我从这个链接中得到了一个答案
但是在大多数解决scheme中，我将不得不在所有页面上编写代码。 我希望它只写在一个地方，以便每个人都不必担心写在他们的模块。 我的代码是这样的：
<script type="text/javascript"> var isChange; $(document).ready(function () { $("input[type='text']").change(function () { isChange = true; }) }); $(window).unload(function () { if (isChange) { alert('Handler for .unload() called.'); } }); </script> 但每次我在文本框中进行更改.change（）事件不会触发。
代码中有什么可能是错的？
编辑：我改.change（）.click，它被解雇。 我正在使用jquery 1.4.1 ..是因为jquery版本change（）不工作？
这就是我正在使用的，把所有这些代码放在一个单独的JS文件，并将其加载到您的头文件，所以你不需要一遍又一遍的复制：
var unsaved = false; $(":input").change(function(){ //trigers 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;
$编辑未find：
这个错误只能由三件事情之一引起：
- 您的JavaScript文件未正确加载到您的网页中
- 你有一个僵化的版本的jQuery。 这可能是因为某人编辑了核心文件，或者一个插件可能覆盖了$variables。
- 在页面被完全加载之前，你已经运行了JavaScript，因此，在jQuery完全加载之前。
确保所有的js代码都被放在这里：
$(document).ready(function () { //place above code here });
编辑保存/发送/提交button例外
$('#save').click(function() { unsaved = false; });
编辑以处理dynamicinput
// 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文件中添加上面的代码。
希望这可以帮助。
一个使用表格序列化的版本：
执行这个代码，当准备好了：
var initial_form_state = $('#myform').serialize(); $('#myform').submit(function(){ initial_form_state = $('#myform').serialize(); }); $(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; } });
如果用户更改字段，然后手动回滚，则不显示警告
一旦用户模糊input而不是每个input的字符都会触发更改事件。
如果每次更改某个对象时都需要调用该对象（即使焦点仍然位于该input字段中），您将不得不依赖组合键和一组事件来跟踪仅使用鼠标进行粘贴/剪切。
PS我希望你知道你的方法来检测变化不是最好的？ 如果用户input一些文本，离开字段，然后恢复更改脚本仍然会提醒他有关修改后的文本。
你应该注册事件不仅input，而且textareas，如果你的意思是textarea文本框。 您可以使用isChange的关键帧，以便您不要等待用户从此区域模糊。
$("input[type='text'], textarea").keyup(function () { isChange = true; })
为什么不简单地将事件绑定到changecallback？
$(":input").change(function() { $(window).unbind('unload').bind('unload',function() { alert('unsaved changes on the page'); }); });
作为额外的奖励，您可以使用confirm并select触发更改事件的最后一个元素：
$(":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 });
如果您有一些保存button，请确保解除绑定事件，但：
$('#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自动使它更好的咖啡文字。 🙂
- 它完全基于事件冒泡，所以dynamic内容自动处理（@ AlphaMale的更新也有这个）。
- 它只在POST表单上运行，因为GET表单没有我们通常希望避免丢失的数据（即GET表单往往是search框和过滤标准）。
- 不需要绑定到执行保存的特定button。 任何时候提交表格，我们都假定提交是保存的。
- 这是Turbolinks兼容。 如果你不需要，只需删除两个
page:事件绑定。 - 它的devise使您可以将其包含在其余的JS中，并且您的整个站点将受到保护。
我使用$('form').change等function设置一个脏位variables。 不适合捕捉所有的变化（按照以前的答案），但抓住我感兴趣的所有，在我的应用程序。
