如何防止“您确定要离开此页面吗？”提交表单时提醒？答案

【问题标题】：How to prevent "Are you sure you want to navigate away from this page?" alert on form submission?如何防止“您确定要离开此页面吗？”提交表单时提醒？
【发布时间】：2012-06-26 08:59:46
【问题描述】：

我有一个简单的 html 表单，里面的字段很少。

我想确保用户在尝试离开页面时收到警告消息。所以我在页面上添加了脚本，当用户试图离开这个页面时，它就会运行。

但当用户尝试提交表单时，我也会收到此警报消息。当用户保存表单时，我不想要此警报消息。

请帮忙。

下面是一些示例代码。

<html>
    <head>

    <script>
        function verifyexit() { return 'Are you sure ?'; }           window.onbeforeunload = verifyexit;
    </script>       
</head>
<body>
        Go to <a href="b.html"> another page </a> 
        <form action="c.html">
            name : <input type="text" name="name" value=""/> <br>
            email : <input type="text" name="email" value=""/> <br>
            <input type="submit" value="save"/>
        </form>
</body>

【问题讨论】：

标签： javascript html

【解决方案1】：

stackoverflow reference

打开它：

window.onbeforeunload = "Are you sure you want to leave?";

要关闭它：

window.onbeforeunload = null;

请记住，这不是正常事件 - 您不能以标准方式绑定到它。

检查值？这取决于您的验证框架。

在 jQuery 中，这可能类似于（非常基本的示例）：

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

With JQuery 这个东西很容易做到。因为您可以绑定到集合。

仅执行 onbeforeunload 是不够的，您只想在有人开始编辑内容时触发导航。

要在 Chrome 和 Safari 中进行这项工作，您必须这样做

window.onbeforeunload = function (e) {
    e = e || window.event;

    var msg = "Sure you want to leave?";

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = msg;
    }

    // For Safari
    return msg;
};

这是参考的一般规则

window.onbeforeunload = function (e) {
  e = e || window.event;

  // For IE<8 and Firefox prior to version 4
  if (e) {
    e.returnValue = 'Any string';
  }

  // For Chrome, Safari, IE8+ and Opera 12+
  return 'Any string';
};

reference: https://developer.mozilla.org/en/DOM/window.onbeforeunload

【讨论】：

you can't bind to it in the standard way 请澄清。

【解决方案2】：

试试这个：

<form action="c.html" onsubmit="window.onbeforeunload=function(){}">

【讨论】：

他在他的问题中表示，他希望在提交表单时之外的所有情况下都执行 onbeforeunload，所以这符合他的规范。
相同...所以删除了我的 ans 和 +1 urs。 @Ashish 还可以看到这个小提琴 jsfiddle.net/FEvkK 以获取另一个工作示例。
@Sean Johnson。很奇怪。我可以看到您的示例正常工作。甚至 Kshitij 的例子也能正常工作。我只是在最后复制粘贴了相同的东西，但它仍然无法正常工作。我尝试了你和 Kshitij 的版本。
这和兼容性有很大关系请问测试过的版本是什么？
@shareef。我在 IE7 上测试

【解决方案3】：

试试这个：

$(window).bind("beforeUnload", verify);
$("form").submit(function (){
    $(window).unbind("beforeUnload");
};

【讨论】：

【解决方案4】：

试试这个：http://cfsilence.com/blog/client/index.cfm/2009/10/12/jQuery-Method-To-Prompt-A-User-To-Save-Changes-Before-Leaving-Page

我在函数中添加了一点：

 $('#submitButton').click(function () {
        isDirty = false;
});

这样表单在您要提交时不会要求验证:)

希望对你有帮助

注意：如果您不喜欢依赖通用命名，也可以执行 $("input[type=submit]") 之类的操作（否则您的提交按钮需要称为 submitButton）

【讨论】：