تتناول هذه المقالة كيفية التعامل مع أحداث التغيير القابلة للتحرير في JavaScript وتشرحها بمساعدة مثال.
كيفية التعامل مع أحداث التغيير القابلة للتعديل في JavaScript؟
يعد contenteditable سمة معدودة. يمكن للمستخدم إجراء تغييرات على المحتوى مع مراعاة متطلباته. إذا سمح بذلك، يقوم المتصفح بتغيير عنصر واجهة المستخدم الخاص به للسماح بتعديل العناصر.
ما هي القيم المسموح بها من خلال حدث تغيير قابل للتعديل؟
يمكن أن يأخذ contenteditable أيًا من هاتين القيمتين:
- يمثل النص العادي فقط أنه يمكن تحرير النص الأصلي على الرغم من تعطيل تنسيق النص المنسق.
- سلسلة فارغة أو صحيحة مما يعني أنه يمكن تحرير العنصر.
- خطأ يعني أنه لا يمكن تحرير العنصر.
مثال
يشرح المثال التالي كيف يمكن استخدام المحتوى القابل للتحرير على صفحة ويب. دعونا نلقي نظرة على الكود أدناه لفهمه بشكل أفضل:
لغة البرمجة
فيما يلي كود HTML الذي يشرح استخدام أحداث التغيير القابلة للتحرير:
< blockquote com.contenteditable = 'حقيقي' >
< h3 > قم بتحرير المحتوى الخاص بك هنا! < / h3 >
< / blockquote >
في كود HTML أعلاه:
- يتم إنشاء علامة اقتباس كتلة مع تعيين السمة contenteditable إلى true. سيؤدي هذا إلى تمكين تحرير المحتوى الموجود داخل علامة blockquote.
- توجد علامة h3 داخل علامة الاقتباس. تقول 'قم بتحرير المحتوى الخاص بك هنا!'، كما هو موجود داخل
، مما يعني أنه يمكن للمستخدم تحرير المحتوى.
CSS
لجعل الكود الخاص بنا جذابًا بصريًا، استخدمنا كود CSS التالي:
blockquote {
خلفية : نفخة الخوخ ;
نصف قطر الحدود : 10 بكسل ;
هامِش : 10 بكسل ;
}
الاقتباس الشامل h3 {
حشوة : 10 بكسل ;
}
في كود CSS أعلاه:
- تم تعيين خلفية علامة blockquote لتكون ذات لون خوخي بنصف قطر حدود 10 بكسل وهامش 10 بكسل.
- تم تعيين عنوان h3 داخل علامة الاقتباس بحيث يحتوي على حشوة تبلغ 10 بكسل.
انتاج | :
يشرح المخرج التالي كيف يمكن تحرير المحتوى باستخدام حدث التغيير contenteditable في JavaScript:
أهمية تحرير المحتوى
- زيادة التفاعل حيث يمكن للمستخدم تعديل المحتوى بسهولة.
- يمكن للتخصيص المريح كمبرمج بمساعدة JavaScript إنشاء سلوكيات معدلة مثل الحفظ التلقائي، مما يؤدي إلى إطلاق إجراءات مختلفة بناءً على مدخلات المستخدم.
- يساعد على تبسيط عملية التحرير مما يسمح للمستخدم بالتحرير ديناميكيًا دون الحاجة إلى حقل نص منفصل.
خاتمة
تتيح أحداث التغيير القابلة للتحرير في JavaScript للمستخدم تعديل المحتوى مما يجعل صفحة الويب سريعة الاستجابة وقابلة للتخصيص. وهذا يمهد الطريق لتطوير الويب الذي يركز على المستخدم حيث يمكن للمستخدم تحرير المحتوى على صفحة الويب في الوقت الفعلي مما يتيح تجربة مستخدم أكثر استجابة. ناقشت هذه المقالة كيفية التعامل مع أحداث التغيير القابلة للتحرير في JavaScript وشرحتها بمساعدة مثال.