HTML contenteditable एट्रिब्यूट: एलिमेंट संपादन योग्य बनाना

contenteditable एट्रिब्यूट

contenteditable एट्रिब्यूट एक ग्लोबल एट्रिब्यूट है जो निर्दिष्ट करता है कि कोई एलिमेंट का कंटेंट उपयोगकर्ता द्वारा संपादन योग्य है या नहीं। यह किसी भी HTML एलिमेंट पर लागू हो सकता है।

सिंटैक्स

<element contenteditable="true | false">

मान

• true: एलिमेंट संपादन योग्य है
• false: एलिमेंट संपादन योग्य नहीं (डिफ़ॉल्ट)
• inherit: पैरेंट से विरासत में प्राप्त (डिफ़ॉल्ट व्यवहार)

उदाहरण: संपादन योग्य हेडिंग और पैराग्राफ

<!DOCTYPE html>
<html>
<body>
  <h2 contenteditable="true">डेमो हेडिंग</h2>
  <p contenteditable="true">यह एक डेमो लाइन है।</p>
</body>
</html>

आउटपुट

हेडिंग और पैराग्राफ सीधे ब्राउज़र में संपादन योग्य होंगे। उपयोगकर्ता क्लिक करके टेक्स्ट बदल सकता है।

कोड व्याख्या

<h2 contenteditable="true">डेमो हेडिंग</h2>
<p contenteditable="true">यह एक डेमो लाइन है।</p>

उपयोग के मामले

• इन-प्लेस एडिटिंग (WYSIWYG एडिटर्स)
• टू-डू लिस्ट्स, नोट्स ऐप्स
• प्रोफाइल नाम, बायो संपादन
• कंटेंट मैनेजमेंट सिस्टम्स

JavaScript API

// जांचें कि संपादन योग्य है या नहीं
element.isContentEditable;  // true/false (विरासत सहित)
element.contentEditable;    // "true", "false", "inherit"

// परिवर्तन सुनें
element.addEventListener('input', function(e) {
  console.log('कंटेंट बदला:', e.target.innerText);
});

CSS स्टाइलिंग

[contenteditable="true"] {
  outline: 2px dashed blue;
  min-height: 1.5em;
}

[contenteditable="true"]:focus {
  background-color: #fffde7;
}