Question

如何让用户知道“如果他们试图关闭浏览器窗口，表单上还有更改？”
我有一个包含几个字段的表单。现在，如果用户更改了某些字段并单击浏览器窗口上的“关闭”按钮，我的脚本应该提醒他未保存的更改。我该如何实现？我已经进行了基本的表单验证，但似乎无法想到window.close（）事件的解决方案。任何示例链接都会有所帮助。

Answer 1

您可以使用正文onbeforeunload或onunload。

<body onBeforeUnload="return(confirm('unsaved stuff'))">

从未使用过返回来停止页面卸载，但它应该可以正常工作。

<强>更新

在网页的标题中，使其成为全局变量：

<script type="text/javascript">
var formData = [];
function saveForm(){
    var data = [];
    for(var index = 1; index <= 3; index++){
        data [index - 1] = document.getElementById("textfield_" + index).value;
    }
    return(data);
}

function unsavedData(){
    var newFormData = saveForm();
    for(var index = 0; index < 2; index++){
        if(formData[index] != newFormData[index]){
            return(confirm("Unsaved data, do you really want to exit?"));
        }
    }
    return(true);
}
</script>

在体内（当然）：

<body onBeforeUnload="return(unsavedData())">
...
<form ... onSubmit="formData = saveForm()">
<input type="text" id="textfield_1">
<input type="text" id="textfield_2">
<input type="text" id="textfield_3">
/*form submit button*/
</form>

Answer 2

等效，但在JavaScript中，您可以执行以下操作：

if ( undefined !== window.onbeforeunload )
{
    window.onbeforeunload = function ()
    {
        var f = window.onbeforeunload;
        var ret = f();
        if (ret)
        {
            return doValidation();
        } else
        {
            return false;
        }
    };
} else
{
    window.onbeforeunload = function ()
    {
        return doValidation();
    };
}

其中doValidation（）是您的自定义验证函数。

Answer 3

您无法阻止用户关闭窗口（这意味着恶意脚本也可能会这样做，使其成为一个巨大的安全漏洞）。

话虽这么说，您可以询问用户是否想在实际离开页面之前保存他/她的更改。您需要onBeforeUnload（在HTML中设置属性或使用javascript）来调用脚本。这就是脚本的样子：

function beforeClose () {

    if (formChanged) {

        var chk = confirm('Do you want to save your changes before you go?');
        if (chk) {

             // Code (AJAX) that will send/ store the data)

         }
     }
}

在这个函数中，我发明了一个名为'formChanged'的变量。最明智的方法是跟踪用户是否在页面上更改了内容（通过将onChange属性添加到将formChanged变量设置为true的表单字段）。您问题的第一条评论中的链接帖子会显示一个jQuery脚本，如果您想使用它，它将检查更改。

Answer 4

发现此链接..相当具有描述性： http://www.4guysfromrolla.com/webtech/100604-1.shtml
可能会帮助像我这样的人。除了这个答案，我不会作为我的解决方案：）

Answer 5

您可以使用 beforeunload 甚至运行一个函数，该函数使用当前值检查成功表单控件的默认值。如果存在任何差异，请提示用户。否则，什么也不做。

Javascript表单验证

5 个答案: