短い、間違った答え：
これを行うには、beforeunloadイベントを処理してnull以外の文字列を返します。
window.addEventListener("beforeunload", function (e) {
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.
});
このアプローチの問題は、フォームを送信すると、アンロードイベントも発生することです。これは、フォームを送信することを示すフラグを追加することで簡単に修正できます。
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; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
次に、送信時にセッターを呼び出します。
<form method="post" onsubmit="setFormSubmitting()">
<input type="submit" />
</form>
しかし、読んでください...
長く正しい答え：
また、ユーザーがフォームで何も変更していないときにこのメッセージを表示したくない場合もあります。1つの解決策は、beforeunloadイベントを「ダーティ」フラグと組み合わせて使用することです。これは、本当に関連がある場合にのみプロンプトをトリガーします。
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.
});
};
isDirtyメソッドを実装するために、さまざまなアプローチがあります。
jQueryとフォームのシリアル化を使用できますが、このアプローチにはいくつかの欠点があります。最初に、任意のフォームで機能するようにコードを変更する必要があります$("form").each()が、最大の問題は、jQuery serialize()が名前付きの無効化されていない要素でのみ機能するため、無効化された要素または名前のない要素を変更してもダーティフラグがトリガーされないことです。そのための回避策があります。たとえば、コントロールを有効にする代わりに読み取り専用にし、シリアル化してから再度無効にするなどです。
したがって、イベントは進むべき道のようです。キープレスを聞いてみることができます。このイベントにはいくつかの問題があります：
- チェックボックス、ラジオボタン、またはマウス入力によって変更されているその他の要素でトリガーしません。
- キーのような無関係なCtrlキーを押すとトリガーされます。
- JavaScriptコードで設定された値でトリガーされません。
- コンテキストメニューからテキストを切り取ったり貼り付けたりしてもトリガーされません。
- JavaScriptを介して非表示の入力に値を保存する、日付ピッカーやチェックボックス/ラジオボタンの美化機能などの仮想入力では機能しません。
このchangeイベントはJavaScriptコードから設定された値に対してもトリガーされないため、仮想入力に対しても機能しません。
inputイベントをinputtextareaselectページ上のすべてのs（およびsとs）にバインドしても、古いブラウザでは機能せず、上記のすべてのイベント処理ソリューションと同様に、元に戻すはサポートされていません。ユーザーがテキストボックスを変更してから元に戻すか、チェックボックスをオンまたはオフにしても、フォームはダーティと見なされます。
また、特定の要素を無視するなど、より多くの動作を実装する場合は、さらに多くの作業が必要になります。
車輪を再発明しないでください：
したがって、これらのソリューションと必要なすべての回避策の実装について考える前に、車輪を再発明していて、他の人がすでに解決している問題に遭遇する傾向があることを理解してください。
アプリケーションですでにjQueryを使用している場合は、独自のコードをロールする代わりに、テスト済みの保守されたコードを使用して、これらすべてにサードパーティのライブラリを使用することもできます。jQuery's Are You Sure？プラグインは素晴らしいです、彼らのデモページを見てください。それはこれと同じくらい簡単です：
<script src="jquery.are-you-sure.js"></script>
<script>
$(function() {
$('#myForm').areYouSure(
{
message: 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.'
}
);
});
</script>
どこでもサポートされていないカスタムメッセージ
Firefox 4はこのダイアログのカスタムメッセージをサポートしていないことに注意してください。2016年4月の時点で、カスタムメッセージも削除されるChrome 51がロールアウトされています。
このサイトの他の場所にもいくつかの選択肢がありますが、このようなダイアログは十分明確だと思います。
このサイトを離れますか？
行った変更は保存されない場合があります。
Leave Stay