लघु, गलत उत्तर:
आप इस घटना को संभालने beforeunloadऔर एक गैर-अशक्त स्ट्रिंग वापस करके ऐसा कर सकते हैं :
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>
लेकिन पढ़िए ...
लंबा, सही उत्तर:
जब उपयोगकर्ता आपके प्रपत्रों में कुछ भी नहीं बदला है, तो आप भी यह संदेश नहीं दिखाना चाहते । एक समाधान 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()नाम केवल गैर-अक्षम तत्वों पर काम करेगा, इसलिए किसी भी अक्षम या अनाम तत्व को बदलने से गंदे झंडे को ट्रिगर नहीं किया जाएगा। इसके लिए वर्कअराउंड हैं , जैसे नियंत्रण को सक्षम करने, अनुक्रमित करने और फिर से फिर से नियंत्रण अक्षम करने के बजाय आसानी से नियंत्रण बनाना।
इसलिए घटनाओं को जाने का रास्ता लगता है। आप keypresses के लिए सुनने की कोशिश कर सकते हैं । इस घटना के कुछ मुद्दे हैं:
- चेकबॉक्स, रेडियो बटन, या अन्य तत्वों पर ट्रिगर नहीं किया जाएगा जो माउस इनपुट के माध्यम से बदल रहे हैं।
- कुंजी की तरह अप्रासंगिक कुंजी के लिए ट्रिगर करेगा Ctrl।
- जावास्क्रिप्ट कोड के माध्यम से निर्धारित मूल्यों पर ट्रिगर नहीं होगा।
- संदर्भ मेनू के माध्यम से पाठ को काटने या चिपकाने पर ट्रिगर नहीं होगा।
- वर्चुअल इनपुट जैसे डेटापिकर्स या चेकबॉक्स / रेडियोबॉटन ब्यूटिफायर के लिए काम नहीं करेंगे जो जावास्क्रिप्ट के माध्यम से छिपे हुए इनपुट में उनके मूल्य को बचाते हैं।
changeघटना भी जावा स्क्रिप्ट कोड से सेट मूल्यों पर ट्रिगर नहीं करता आभासी आदानों के लिए काम नहीं करेगा, तो भी।
inputinputtextareaselectअपने पेज पर सभी s (और s ) के लिए इवेंट को बाइंड करना पुराने ब्राउज़र पर काम नहीं करेगा और, जैसा कि ऊपर वर्णित सभी इवेंट हैंडलिंग समाधान पूर्ववत नहीं करता है। जब कोई उपयोगकर्ता एक टेक्स्टबॉक्स बदलता है और फिर उस चेक को अनचेक करता है, या चेकबॉक्स को अनचेक करता है, तो फॉर्म को अभी भी गंदा माना जाता है।
और जब आप अधिक व्यवहार को लागू करना चाहते हैं, जैसे कुछ तत्वों को अनदेखा करना, तो आपके पास और भी अधिक काम करना होगा।
पहिया को मजबूत न करें:
तो इससे पहले कि आप उन समाधानों और सभी आवश्यक वर्कअराउंड को लागू करने के बारे में सोचें, एहसास करें कि आप पहिया को फिर से मजबूत कर रहे हैं और आप दूसरों के लिए पहले से ही हल किए गए समस्याओं में चलने के लिए प्रवण हैं।
यदि आपका आवेदन पहले से ही jQuery का उपयोग करता है, तो आप अपने स्वयं के रोल करने के बजाय परीक्षण किए गए, बनाए रखा कोड का उपयोग कर सकते हैं, और इस सब के लिए एक तीसरे भाग के पुस्तकालय का उपयोग कर सकते हैं। jQuery के आप सुनिश्चित हैं? प्लगइन महान काम करता है, उनके डेमो पेज देखें । यह इस तरह सरल है:
<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>
कस्टम संदेश हर जगह समर्थित नहीं हैं
ध्यान दें कि फ़ायरफ़ॉक्स 4 ने इस संवाद में कस्टम संदेशों का समर्थन नहीं किया। अप्रैल 2016 तक, क्रोम 51 को रोल आउट किया जा रहा है जिसमें कस्टम संदेश भी निकाले जा रहे हैं ।
इस साइट पर कुछ विकल्प मौजूद हैं, लेकिन मुझे लगता है कि इस तरह का एक संवाद पर्याप्त स्पष्ट है:
क्या आप इस साइट को छोड़ना चाहते हैं?
आपके द्वारा किए गए परिवर्तन सहेजे नहीं जा सकते हैं।
Leave Stay