Question

我正在尝试检测输入字段的更改，以警告用户表单上未保存的更改。我在字段上使用onchange事件来记录表单已更改。我正在使用beforeunload窗口事件来阻止用户在需要保存时离开页面。问题是所有主流浏览器上的后退按钮确实让活动输入触发更改事件。我该如何解决这个问题？

以下是我正在使用的测试文件。我希望在用户编辑输入字段时触发警报，然后立即单击。编辑文本然后单击正文将触发更改，但这还不够。

starteditor.html

<!doctype html>
<html>
<head>
</head>
<body>
    <a href="editor.html">Click me</a>
</body>
</html>

editor.html

<!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script>
        $(document).ready(function(){
            $("form").delegate("input", "change", function () { alert("I changed") });
        });
    </script>
</head>
<body>
    Edit text then click the browsers back button.
    <form>
        <input type="text" />
    </form>
</body>
</html>

Answer 1

简短的回答：你没有。

后退按钮属于用户，位于页面的输入之外。你得到的最接近的是window.unload事件。但窗口不知道用户是否已关闭窗口，点击后退按钮，点击F5重新加载页面，在URL输入字段中键入新URL，打开书签或告诉浏览器关闭或任何另一种方式你可能会解雇一个页面。此外，您无法取消unload事件：提供此事件以便页面可以干净地关闭。

来自http://www.w3.org/TR/DOM-Level-2-Events/events.html的规范，第1.6.5节（ HTML事件类型）：

的卸载
当DOM实现从窗口或框架中删除文档时，会发生卸载事件。此事件对BODY和FRAMESET元素有效。

气泡：否

可取消：否

上下文信息：无

如何使浏览器返回按钮触发输入的更改事件？

1 个答案: