HTML DOM टेक्स्टएरिया readOnly प्रॉपर्टी: केवल-पढ़ने योग्य मोड टॉगल करना

HTML DOM टेक्स्टएरिया readOnly प्रॉपर्टी लौटाती और संशोधित करती है कि HTML दस्तावेज़ में टेक्स्ट एरिया एलिमेंट की सामग्री केवल-पढ़ने योग्य होनी चाहिए या नहीं।

सिंटैक्स

1. readOnly प्राप्त करना:

object.readOnly

2. readOnly सेट करना:

object.readOnly = true | false

उदाहरण: रीड-ओनली टॉगल करना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
<body>
  <h1>DOM टेक्स्टएरिया readOnly प्रॉपर्टी डेमो</h1>
  <textarea rows="5" cols='20' name="मैं टेक्स्टएरिया एलिमेंट का name एट्रिब्यूट हूँ">
    नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक टेक्स्ट एरिया एलिमेंट हूँ।
  </textarea>
  <button onclick="set()" class="btn">रीड-ओनली टॉगल करें</button>
  <script>
    function set() {
      var ta = document.querySelector("textarea");
      if (ta.readOnly === true) {
        ta.readOnly = false;
      } else {
        ta.readOnly = true;
      }
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: संपादन योग्य टेक्स्टएरिया
2. "रीड-ओनली टॉगल करें" क्लिक: टेक्स्टएरिया केवल-पढ़ने योग्य हो जाता है (ग्रे बैकग्राउंड आमतौर पर)
3. दोबारा क्लिक: फिर से संपादन योग्य हो जाता है

readOnly vs disabled

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

• पूर्व-भरे डेटा: यूज़र को दिखाएं लेकिन संपादन न करने दें
• शर्ती संपादन: अनुमति के आधार पर सक्षम/अक्षम करें
• गणना फील्ड्स: अन्य फील्ड्स से गणना किए गए मान
• पुष्टि चरण: सबमिशन से पहले समीक्षा के लिए रीड-ओनली