HTML readOnly एट्रिब्यूट

परिचय

HTML readOnly एट्रिब्यूट यह दर्शाता है कि एक <input> या <textarea> एलिमेंट केवल-पढ़ने योग्य (read-only) है, अर्थात उपयोगकर्ता इसकी सामग्री को संशोधित नहीं कर सकता। हालांकि, उपयोगकर्ता इसमें टैब कर सकता है, इसे हाइलाइट कर सकता है, और इसकी सामग्री कॉपी कर सकता है।

सिंटैक्स

<tagname readOnly></tagname>

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  input {
    display: block;
    width: 50%;
    margin: 1rem auto;
    text-align: center;
    padding: 8px;
    font-size: 1rem;
  }
</style>
<body>
<h1>HTML readOnly एट्रिब्यूट डेमो</h1>
<input type="text" value="मैं readOnly प्रॉपर्टी वाला एक इनपुट एलिमेंट हूँ" readOnly>
</body>
</html>

आउटपुट

एक इनपुट फ़ील्ड दिखाई देगी जिसमें टेक्स्ट होगा, लेकिन उपयोगकर्ता उसे संपादित नहीं कर सकेगा। फ़ील्ड फोकस प्राप्त कर सकता है और टेक्स्ट चुना/कॉपी किया जा सकता है।

readOnly vs disabled

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

• पूर्व-भरे मान दिखाना जिन्हें उपयोगकर्ता नहीं बदल सकता
• गणना किए गए फील्ड्स (कुल, योग, आदि)
• उपयोगकर्ता आईडी, टाइमस्टैम्प जैसे मेटाडेटा फील्ड्स
• शर्तों के आधार पर सशर्त रूप से संपादन सक्षम/अक्षम करना

JavaScript के माध्यम से टॉगल करना

// सक्षम करें
element.readOnly = true;
// अक्षम करें
element.readOnly = false;

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।