اذهب إلى المحتوى
  • 1

إظهار رسالة حين إغلاق الصفحة أثناء الكتابة [Javascript]

علي أحمد-2

السؤال

السلام عليكم،

لدي موقع مبرمج بالـphp و لغات الهيكلة والتصميم والـjs ، لدي عدد من الـinputs مثل الـ(textarea , input=text ... الخ) كيف أعرف بأن المستخدم يريد إغلاق الصفحة ولا يزال هنالك نص في المدخلات لم يتم ارساله أو لم يتم مسحه بالكامل ، ثم اظهر له رسالة بالجافاسكربت بأنه لم يرسل النص هل يريد المغادرة أم البقاء ( Leave or Stay ) ؟

الميزة مبرمجة وموجودة في موقع حسوب I/O وأريد أن أضعها في موقعي، فكيف يتم برمجتها رجاءً؟
وشكراً؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

هذه الشيفرة تعمل مع عنصري المدخلات input وtextarea، يجب أن تعمل على أغلب المتصفحات، كتبتها بـES5 -يمكنك أن تعيد كتابتها بـES6 سيكون تنسيقا أفضل فقط- يجب أن تعمل في أي مكان في بيئة المتصفح سواءً قبل التحميل أو بعده:

function checkInputs() {
	var elements = document.querySelectorAll('input, textarea'),
		ei;
	
	for (ei in [].slice.call(elements)) {
		if (elements[ei] && typeof elements[ei].value == 'string' && 
			elements[ei].value.length > 0) {
			return true;
		}
	}
	
	return false;
}

window.addEventListener('beforeunload', function unloadCallback(e) {
	// هذه الرسالة لن تظهر في كل المتصفحات
	var confirmMsg = 'هل أنت متأكد من رغبتك بمغادرة الصفحة';

	if (checkInputs()) {
		// كروم وWebkit القديم
		e.returnValue = confirmMsg;
		
		return confirmMsg;
	}
});

 

تم التعديل في بواسطة يوسف سيد
querySelectorAll بدلًا من querySelector
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

@يوسف سيد

شكراً لك صديقي يوسف، عمل الكود بنجاح.

تم التعديل في بواسطة علي أحمد-2
تم التجربة مرة أخرى ونجح الأمر.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...