جعل محتوى صفحة الويب قابل للتحرير بواسطة زوار الموقع

جعل النص على موقع الويب القابل للتعديل من قبل المستخدمين أسهل مما تتوقع. يوفر HTML سمة لهذا الغرض: contenteditable.

ال contenteditable تم تقديم السمة لأول مرة في عام 2014 بإصدار HTML5. وهي تحدد ما إذا كان المحتوى الذي يحكمه يمكن تغييره بواسطة زائر موقع من داخل المتصفح.

دعم السمة المميزة

تدعم معظم متصفحات سطح المكتب الحديثة السمة. وتشمل هذه:

• كروم 4.0 وما فوق
• إنترنت إكسبلورر 6 وما فوق
• فايرفوكس 3.5 وما فوق
• سفاري 3.1 وما فوق
• أوبرا 10.1 وما فوق
• مايكروسوفت ايدج

وينطبق الشيء نفسه على معظم متصفحات الجوال أيضًا.

كيفية استخدام

ما عليك سوى إضافة السمة إلى عنصر HTML الذي تريد جعله قابلاً للتعديل. لديها ثلاث قيم محتملة:صحيح, خاطئة و يرث. يرث هي القيمة الافتراضية ، وهذا يعني أن العنصر يأخذ قيمة أصله. وبالمثل ، سيتم أيضًا تعديل أي عناصر تابعة لمحتوى جديد قابل للتعديل ما لم تغير قيمه إلى خاطئة. على سبيل المثال ، لجعل DIV عنصر قابل للتعديل ، استخدم:

إنشاء قائمة مهام قابلة للتحرير مع

يعد المحتوى القابل للتعديل مفيدًا للغاية عند إقرانه بالتخزين المحلي ، بحيث يستمر المحتوى بين الجلسات وزيارات الموقع.

1. افتح صفحتك في محرر HTML.
2. إنشاء قائمة نقطية غير مرتبة مسمى مهامي:
   2. بعض المهام
   4. مهمة أخرى
5. أضف الcontenteditable السمة الى
   جزء:
   لديك الآن قائمة مهام قابلة للتحرير - ولكن إذا أغلقت المتصفح أو غادرت الصفحة ، فستختفي القائمة. الحل: إضافة برنامج نصي بسيط لحفظ المهام إلى LocalStorage.
8. أضف رابط إلى jQuery في من المستند الخاص بك. يستخدم هذا المثال Google CDN ، ولكن يمكنك استضافته بنفسك أو استخدام CDN آخر إذا كنت تفضل ذلك.
11. في الجزء السفلي من صفحتك ، فوق العلامة ، أضف النص البرمجي الخاص بك: هذه هي بداية jQuery document.ready ويخبر المتصفح بتحميل هذا البرنامج النصي بعد تحميل المستند بالكامل.

داخل document.ready وظيفة ، إضافة البرنامج النصي لتحميل المهام في localStorage والحصول على أي المهام التي تم حفظها هناك سابقا: $ (document.ready (وظيفة () {

1. $ ("# myTasks"). blur (function () {// عندما يترك المؤشر عنصر #myTasks
4. localStorage.setItem ('myTasksData'، this.innerHTML)؛ // save to localStorage
7. });
10. إذا (localStorage.getItem ('myTasksData')) {// إذا كان هناك محتوى في التخزين المحلي
13. $ ( "# myTasks") أتش تي أم أل (localStorage.getItem ( 'myTasksData'))؛ // وضع المحتوى على الصفحة
16. }
17. });

يبدو HTML للصفحة بأكملها على النحو التالي:

مهامي

أدخل عناصر لقائمتك. سيقوم المتصفح بتخزينه لك ، بحيث أنه عند إعادة فتح المتصفح ، سيظل هنا.

• بعض المهام
• مهمة أخرى