如何防止導航到其他頁面而不提交 javascript 中的表單？

Question

如果用戶填寫了一半的表格，並且如果用戶在沒有提交該表格的情況下導航另一個 URL，他應該得到確認，如果他確認，那么他應該導航。 如何在 javascript 中實現這一點？

Answer 1

有兩個選項可以解決此問題 -第三方解決方案和自定義解決方案。 （我推薦第三方解決方案，我稍后會解釋原因）

第三方 - jQuery 的 jquery.dirty：

優點：

• 簡單的語法
• 大多數瀏覽器都支持
• 不太可能引起問題

缺點：

• 外包依賴 - 通常不太安全
• 可定制性較低

jquery.dirty提供了檢測表單是否被更改，以及防止用戶在顯示提示時離開頁面的功能。 它還具有其他有用的功能，例如重置表單，以及將表單的當前 state 設置為“干凈”的 state。 示例用法：

$("#myForm").dirty({preventLeaving: true});

內部解決方案 - 使用 `beforeunload`：

優點：

- 更可定制，您可以定制 i。 - 通常更安全 - 沒有依賴關系

缺點：

- 並非所有瀏覽器都支持（其中大多數不支持自定義按摩） - 在編碼過程中您更有可能遇到問題

當 window、文檔及其資源即將被卸載時，會觸發beforeunload事件。 文檔仍然可見，此時事件仍然可以取消。

在實現代碼之前，我們需要面對幾個問題（可以解決）。

1. 提交表單也是一個`unload`事件

為了解決這個問題，我們將添加一個標志來告訴我們表單已提交。

 var formSubmitting = false; var setFormSubmitting = function() { formSubmitting = true; }; window.onload = function() { window.addEventListener("beforeunload", function (e) { if (formSubmitting) { return undefined; } var confirmationMessage = 'It looks like you have been editing something. ' + 'If you leave before saving, your changes will be lost.'; (e || window.event).returnValue = confirmationMessage; return confirmationMessage; }); };

2. 當用戶沒有改變任何東西時會發生什么？

為了解決這個問題，我們將使用 `isDirty` 方法添加一個 `dirty` 來觸發相關事件的提示。

var isDirty = function() { return false; }

 window.onload = function() { window.addEventListener("beforeunload", function (e) { if (formSubmitting ||;isDirty()) { return undefined. } var confirmationMessage = 'It looks like you have been editing something, ' + 'If you leave before saving. your changes will be lost;'. (e || window.event);returnValue = confirmationMessage; //Gecko + IE return confirmationMessage, //Gecko + Webkit, Safari. Chrome etc; }); };