தள பார்வையாளர்கள் திருத்தும்படி வலை பக்க உள்ளடக்கம் செய்தல்

பயனர்களால் திருத்தப்படக்கூடிய ஒரு வலைத்தளத்தின் உரைகளை நீங்கள் எதிர்பார்க்கும் விட எளிதானது. HTML இந்த நோக்கத்திற்காக ஒரு பண்புக்கூறு வழங்குகிறது: contenteditable.

தி contenteditable பண்புக்கூறு முதலில் 2014 இல் அறிமுகப்படுத்தப்பட்டதுடன் HTML5 வெளியிடப்பட்டது. அது நிர்வகிக்கும் உள்ளடக்கம் உலாவியில் இருந்து ஒரு பார்வையாளர் பார்வையாளரால் மாற்றப்படக்கூடும் என்பதை இது குறிப்பிடுகிறது.

Contenteditable பண்புக்கூறுக்கான ஆதரவு

மிக நவீன டெஸ்க்டாப் உலாவிகளில் பண்புக்கு ஆதரவு. இவை பின்வருமாறு:

• குரோம் 4.0 மற்றும் மேலே
• இன்டர்நெட் எக்ஸ்ப்ளோரர் 6 மற்றும் மேலே
• Firefox 3.5 மற்றும் அதற்கு மேல்
• சஃபாரி 3.1 மற்றும் அதற்கு மேல்
• ஓபரா 10.1 மற்றும் மேலே
• மைக்ரோசாப்ட் எட்ஜ்

அதே மிக மொபைல் உலாவிகளில் செல்கிறது, கூட.

Contenteditable பயன்படுத்துவது எப்படி

வெறுமனே நீங்கள் எடிட் செய்ய விரும்பும் HTML உறுப்பு பண்பு சேர்க்க. இது மூன்று சாத்தியமான மதிப்புகளைக் கொண்டுள்ளது:உண்மை, தவறான மற்றும் மரபுரிமையாக. மரபுரிமையாக இயல்புநிலை மதிப்பு, அதாவது உறுப்பு அதன் பெற்றோரின் மதிப்பைப் பெறுகிறது. அதேபோல், உங்கள் புதிய திருத்தும்படி உள்ளடக்கத்தின் எந்த குழந்தை கூறுகளும் மாற்றப்படாவிட்டால், திருத்தவும் முடியும் தவறான. உதாரணமாக, ஒரு செய்ய DIV ஐ உறுப்பு திருத்தலாம், பயன்படுத்தவும்:

Contentableitable ஒரு செய்ய திருத்தும்படி பட்டியல் உருவாக்க

நீங்கள் உள்ளூர் சேமிப்புடன் இணைந்திருக்கும்போது திருத்தக்கூடிய உள்ளடக்கம் மிகுந்த அர்த்தத்தை தருகிறது, எனவே உள்ளடக்கமானது அமர்வுகளுக்கும் தள வருகைகளுக்கும் இடையில் தொடர்ந்து நீடிக்கும்.

1. உங்கள் பக்கத்தை HTML எடிட்டரில் திறக்கவும்.
2. பெயரிடப்பட்ட ஒரு பட்டியலிடப்படாத பட்டியலை உருவாக்கவும் myTasks:
   2. சில பணி
   4. மற்றொரு பணி
5. சேர்contenteditable பண்புக்கூறு
   உறுப்பு:
   இப்போது நீங்கள் செய்யக்கூடிய பட்டியல் ஒன்று இருக்கிறது - ஆனால் உங்கள் உலாவியை மூடிவிட்டால் அல்லது பக்கத்தை விட்டு வெளியேறினால், உங்கள் பட்டியல் மறைந்துவிடும். தீர்வு: localStorage க்கு பணிகளை சேமிக்க ஒரு எளிய ஸ்கிரிப்ட் சேர்க்கவும்.
8. ஒரு இணைப்பை jQuery சேர்க்க உங்கள் ஆவணத்தில். இந்த எடுத்துக்காட்டானது Google CDN ஐப் பயன்படுத்துகிறது, ஆனால் நீங்கள் விரும்பினால் அதை ஹோஸ்ட் செய்யலாம் அல்லது நீங்கள் விரும்பினால் மற்றொரு CDN ஐப் பயன்படுத்தலாம்.
11. உங்கள் பக்கத்தின் கீழே, வெறும் மேலே குறிச்சொல், உங்கள் ஸ்கிரிப்ட் சேர்க்க: இது jQuery இன் தொடக்கமாகும் document.ready செயல்பாடு மற்றும் இந்த ஸ்கிரிப்ட் ஏற்றப்பட்ட பின்னர் உலாவி கூறுகிறது ஆவணத்தை முழுமையாக ஏற்றப்பட்ட பிறகு.

உள்ளே document.ready செயல்பாடு, localStorage இல் பணிகளை ஏற்ற உங்கள் ஸ்கிரிப்ட் சேர்க்க மற்றும் முன்னர் அங்கு சேமிக்கப்படும் எந்த பணிகளை கிடைக்கும்: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () {// கர்சர் # myTasks உறுப்பு விட்டு
4. localStorage.setItem ('myTasksData', this.innerHTML); // உள்ளூர் ஸ்டோரேஜ் சேமிக்க
7. });
10. (localStorage.getItem ('myTasksData')) {/ localStorage இல் உள்ளடக்கம் இருந்தால்
13. $ ( "# MyTasks") HTML (localStorage.getItem ( 'myTasksData')). // உள்ளடக்கத்தில் உள்ளடக்கத்தை வைக்கவும்
16. }
17. });

முழு பக்கத்திற்கான HTML இதைப் போன்றது:

எனது பணிகள்

உங்கள் பட்டியலில் உருப்படிகளை உள்ளிடவும். உலாவி அதை சேமித்து வைக்கும், அதனால் உங்கள் உலாவியை மீண்டும் திறக்கும்போது, ​​அது இன்னும் இருக்கும்.

• சில பணி
• மற்றொரு பணி