সংক্ষিপ্ত, ভুল উত্তর:
আপনি ইভেন্টটি পরিচালনা করে 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()কেবল নামযুক্ত, অ-অক্ষম উপাদানগুলিতে কাজ করবে, সুতরাং কোনও অক্ষম বা নামবিহীন উপাদান পরিবর্তন করা ময়লা পতাকাটি ট্রিগার করবে না। তার জন্য কার্যকারিতা রয়েছে , যেমন সক্রিয় করার পরিবর্তে পাঠ্যভাবে নিয়ন্ত্রণ তৈরি করা, সিরিয়ালাইজ করা এবং তারপরে আবার নিয়ন্ত্রণগুলি অক্ষম করা।
সুতরাং ইভেন্টগুলি যাওয়ার পথে মনে হচ্ছে। আপনি কিপ্রেস শোনার চেষ্টা করতে পারেন । এই ইভেন্টটিতে কয়েকটি সমস্যা রয়েছে:
- চেকবক্স, রেডিও বোতাম বা মাউস ইনপুট দ্বারা পরিবর্তন করা হচ্ছে এমন অন্যান্য উপাদানগুলিতে ট্রিগার করবেন না।
- Ctrlকী এর মতো অপ্রাসঙ্গিক কীপ্রেসগুলির জন্য ট্রিগার করবে ।
- জাভাস্ক্রিপ্ট কোডের মাধ্যমে সেট মানগুলিতে ট্রিগার করবে না।
- প্রসঙ্গ মেনুগুলির মাধ্যমে পাঠ্য কাটা বা আটকানোতে ট্রিগার করবেন না।
- ডেটপিকারস বা চেকবক্স / রেডিওবোটন বিউটিফায়ারগুলির মতো ভার্চুয়াল ইনপুটগুলির জন্য কাজ করবে না যা জাভাস্ক্রিপ্টের মাধ্যমে কোনও লুকানো ইনপুটে তাদের মান সংরক্ষণ করে।
changeঘটনা আরো জাভাস্ক্রিপ্ট কোড থেকে সেট মান উপর আরম্ভ না ভার্চুয়াল ইনপুট জন্য কাজ না করবে না, তেমনি।
inputinputtextareaselectআপনার পৃষ্ঠার সমস্ত (এবং গুলি এবং গুলি) এর সাথে ইভেন্টটি আবদ্ধ করা পুরানো ব্রাউজারগুলিতে কাজ করবে না এবং উপরে উল্লিখিত সমস্ত ইভেন্ট হ্যান্ডলিং সমাধানগুলির মতো, পূর্বাবস্থাকে সমর্থন করে না। যখন কোনও ব্যবহারকারী একটি পাঠ্যবক্স পরিবর্তন করে এবং তারপরে এটি পূর্বাবস্থায় ফিরে যায়, বা চেকবক্সটি চেক করে এবং আনচেক করে, তখনও ফর্মটি নোংরা বলে মনে করা হয়।
এবং যখন আপনি আরও কিছু আচরণ কার্যকর করতে চান, যেমন নির্দিষ্ট উপাদানগুলিকে উপেক্ষা করার মতো, আপনার আরও কাজ করার দরকার পড়ে।
চাকা পুনরায় উদ্ভাবন করবেন না:
সুতরাং এই সমাধানগুলি এবং প্রয়োজনীয় সমস্ত কাজের বাস্তবায়ন সম্পর্কে ভাবার আগে আপনি বুঝতে পারবেন যে আপনি চাকাটি পুনর্নবীকরণ করছেন এবং অন্যরা ইতিমধ্যে আপনার সমস্যার সমাধান করে নিয়েছে।
যদি আপনার অ্যাপ্লিকেশনটি ইতিমধ্যে 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 এই ডায়ালগটিতে কাস্টম বার্তাগুলি সমর্থন করে না। এপ্রিল ২০১ of পর্যন্ত, ক্রোম ৫১ রোল আউট হচ্ছে যেখানে কাস্টম বার্তাগুলিও সরানো হচ্ছে ।
কিছু বিকল্প এই সাইটে অন্য কোথাও বিদ্যমান, তবে আমি মনে করি এর মতো একটি ডায়ালগ যথেষ্ট পরিষ্কার:
আপনি কি এই সাইটটি ছেড়ে যেতে চান?
আপনার করা পরিবর্তনগুলি সংরক্ষিত নাও হতে পারে।
Leave Stay