如何显示“您确定要离开此页面吗？” 何时提交更改？

猴子Near2020-04-03

在stackoverflow中，如果您开始进行更改，然后尝试离开该页面，则会显示一个javascript确认按钮并询问：“确定要离开该页面吗？” blee blah bloo ...

之前有人实施过此功能，如何跟踪所做的更改？我相信自己可以做到，我正在尝试向您的专家学习良好做法。

我尝试了以下操作，但仍然无法正常工作：

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

有人可以举一个例子吗？

小胖Green梅2020/04/03 10:27:57

通过在TextArea的onChange事件上将ChangeFlag设置为true，可以轻松完成此操作。使用javascript显示基于ChangeFlag值的确认对话框。如果确认返回true，则丢弃表单并导航到请求的页面，否则执行no-thing。

Green达蒙2020/04/03 10:27:57

body标签有一个“ onunload”参数，您可以从那里调用javascript函数。如果返回false，则将阻止导航。

乐2020/04/03 10:27:56

您要使用的是JavaScript中的onunload事件。

这是一个示例：http : //www.w3schools.com/jsref/event_onunload.asp

村村西门2020/04/03 10:27:56

您可以onchange在textarea（或任何其他字段）上添加一个在JS中设置变量的事件。当用户尝试关闭页面（window.onunload）时，您检查该变量的值并相应地显示警报。

小胖Gil2020/04/03 10:27:56

这是我的html

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

所以这就是我在javaScript中做类似的事情的方式

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

Gil伽罗小宇宙2020/04/03 10:27:56

当用户开始更改表单时，将设置一个布尔标志。如果用户随后尝试离开该页面，请在window.onunload事件中检查该标志。如果设置了标志，则通过将其作为字符串返回来显示消息。以字符串形式返回消息将弹出一个确认对话框，其中包含您的消息。

如果您正在使用ajax提交更改，则可以在提交更改false后（即在ajax成功事件中）将标志设置为。

番长2020/04/03 10:27:56

使用JQuery，这东西很容易做到。既然可以绑定到集合。

它不足以执行onbeforeunload，您只想在有人开始编辑内容时触发导航。

神乐2020/04/03 10:27:56

对于正在寻找简单解决方案的新人们，只需尝试Areyousure.js

Mandy村村2020/04/03 10:27:56

如果在表单中输入了任何数据，这是一种显示消息的简单方法，如果提交了表单，则不显示消息：

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

西门2020/04/03 10:27:56

要在Chrome和Safari中实现此功能，您必须这样做

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

参考：https : //developer.mozilla.org/en/DOM/window.onbeforeunload

Gil伽罗小宇宙2020/04/03 10:27:56

在onbeforeunload微软主义是我们要一个标准的解决方案，但要知道，浏览器支持参差不齐最接近; 例如，对于Opera，它仅在版本12和更高版本中有效（在撰写本文时仍为Beta）。

另外，为了获得最大的兼容性，您需要做的不仅仅是返回字符串，还需要做更多的事情，如Mozilla开发人员网络上所述。

示例：定义以下两个用于启用/禁用导航提示的功能（请参见MDN示例）：

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

然后定义如下形式：

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

这样，仅当用户更改了文本区域时，才会警告用户导航，并且在实际提交表单时不会提示用户。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer