సైట్ సందర్శకులు సవరించగలిగేలా వెబ్ పేజీ కంటెంట్ని రూపొందిస్తుంది

వినియోగదారులచే సవరించగలిగేలా వెబ్ సైట్లో టెక్స్ట్ని మీరు ఊహించిన దాని కంటే సులభం. HTML ఈ ప్రయోజనం కోసం ఒక లక్షణాన్ని అందిస్తుంది: contenteditable.

ది contenteditable లక్షణం మొదటిసారిగా 2014 లో HTML5 విడుదలతో పరిచయం చేయబడింది. ఇది నిర్వహిస్తున్న కంటెంట్ బ్రౌజర్లో నుండే సైట్ సందర్శకునిచే మార్చబడిందా అని నిర్దేశిస్తుంది.

Contenteditable లక్షణం కోసం మద్దతు

చాలా ఆధునిక డెస్క్టాప్ బ్రౌజర్లు ఆ లక్షణాన్ని మద్దతిస్తాయి. వీటితొ పాటు:

క్రోమ్ 4.0 మరియు అప్
ఇంటర్నెట్ ఎక్స్ప్లోరర్ 6 మరియు అప్
ఫైర్ఫాక్స్ 3.5 మరియు అప్
సఫారి 3.1 మరియు అప్
ఒపేరా 10.1 మరియు అప్
మైక్రోసాఫ్ట్ ఎడ్జ్

అదే చాలా మొబైల్ బ్రౌజర్లు కోసం కూడా వెళుతుంది.

Contenteditable ఎలా ఉపయోగించాలి

మీరు సవరించగలిగేలా చేయడానికి కావలసిన HTML అంశానికి లక్షణాన్ని జోడించండి. దీనికి మూడు విలువలు ఉన్నాయి:నిజమైన, తప్పుడు మరియు వారసత్వంగా. వారసత్వంగా అప్రమేయ విలువ, మూలకం దాని పేరెంట్ యొక్క విలువపై పడుతుంది. అలాగే, మీరు వారి విలువలను మార్చకపోతే మీ కొత్తగా సవరించగలిగే కంటెంట్ యొక్క ఏవైనా పిల్లల అంశాలు కూడా సవరించబడతాయి తప్పుడు. ఉదాహరణకు, ఒక చేయడానికి DIV మూలకం సవరించగలిగేలా, ఉపయోగం:

Contentableitable తో సవరించగలిగేలా చేయవలసిన జాబితాను సృష్టించండి

సవరించగలిగేలా కంటెంట్ మీరు స్థానిక నిల్వతో జతచేసినప్పుడు చాలా అర్ధమే, కాబట్టి సెషన్లు మరియు సైట్ సందర్శనల మధ్య కంటెంట్ అలాగే ఉంటుంది.

మీ పేజీని HTML ఎడిటర్లో తెరవండి.
బుల్లెటెడ్, క్రమం లేని జాబితాను సృష్టించండి myTasks: కొంత పని మరొక పని


జోడించుcontenteditable లక్షణం

 మూలకం: 

 మీరు ఇప్పుడు సవరించగలిగేలా చేయవలసిన జాబితాను కలిగి ఉన్నారు-కాని మీరు మీ బ్రౌజర్ను మూసివేసినా లేదా పేజీని వదిలినట్లయితే, మీ జాబితా అదృశ్యమవుతుంది. పరిష్కారం: స్థానిక స్టోరీకి పనులు సేవ్ చేయడానికి ఒక సాధారణ లిపిని జోడించండి.


లో j క్వెరీ లింక్ జోడించండి 
 మీ పత్రం.  ఈ ఉదాహరణ Google CDN ను ఉపయోగిస్తుంది, కానీ మీరు దానిని మీకు హోస్ట్ చెయ్యవచ్చు లేదా మీరు కావాలనుకుంటే మరొక CDN ను ఉపయోగించవచ్చు.


మీ పేజీ దిగువన, కేవలం పైన ట్యాగ్, మీ స్క్రిప్ట్ ను జోడించండి:  ఇది j క్వెరీ ప్రారంభం document.ready ఫంక్షన్ మరియు పత్రం పూర్తిగా లోడ్ అయిన తర్వాత ఈ స్క్రిప్ట్ను లోడ్ చెయ్యడానికి బ్రౌజర్కు చెబుతుంది.


ఇన్సైడ్ document.ready ఫంక్షన్, localStorage లోకి పనులు లోడ్ మీ స్క్రిప్ట్ జోడించడానికి మరియు గతంలో అక్కడ సేవ్ ఏ పనులు పొందండి: $ (document.ready (function () {

 $ ("# నా టాస్క్లు") బ్లర్ (ఫంక్షన్ () {/ / కర్సర్ కర్త # 
 
 
 localStorage.setItem ('myTasksData', this.innerHTML); // స్థానిక నిల్వకు సేవ్
  
 
 });
  
 
 (localStorage.getItem ('myTasksData')) {/ localStorage లో కంటెంట్ ఉంటే
  
 
 $ ( "# MyTasks") html (localStorage.getItem ( 'myTasksData')). / / పేజీలో కంటెంట్ ఉంచండి
  
 
 }
  });

మొత్తం పేజీ కోసం HTML ఇలా కనిపిస్తుంది:

నా విధులు

`నా విధులు`



మీ జాబితా కోసం అంశాలను నమోదు చేయండి. బ్రౌజర్ మీ కోసం దీన్ని నిల్వ చేస్తుంది, తద్వారా మీరు మీ బ్రౌజర్ని తిరిగి తెరిచినప్పుడు, ఇది ఇప్పటికీ ఇక్కడే ఉంటుంది.


కొంత పని

మరొక పని