HTML इनपुट readonly एट्रिब्यूट: केवल-पढ़ने योग्य फील्ड बनाना

HTML इनपुट readonly एट्रिब्यूट एक इनपुट एलिमेंट को असंशोधनीय घोषित करता है, हालांकि इसे अभी भी कॉपी किया जा सकता है। यह disabled से अलग है क्योंकि readonly फील्ड्स फॉर्म सबमिशन में शामिल होते हैं।

उदाहरण: केवल-पढ़ने योग्य ईमेल फील्ड

<!DOCTYPE html>
<html>
<head>
  <title>इनपुट ईमेल readOnly</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>ईमेल-readOnly</legend>
      <label for="EmailSelect">संपर्क करें: 
        <input type="email" id="EmailSelect" onclick="showErrorMsg()" value="infoHelpDesk@MNC.com" readOnly>
      </label>
      <input type="button" onclick="showMessage()" value="ईमेल आईडी कॉपी करें">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    divDisplay.textContent = 'ऊपर दिया गया ईमेल केवल-पढ़ने योग्य है';
    function showMessage() {
      inputEmail.select();
      document.execCommand('copy');
      divDisplay.textContent = 'ईमेल कॉपी किया गया: ' + inputEmail.value;
    }
    function showErrorMsg() {
      divDisplay.textContent += ', इसे संपादित नहीं किया जा सकता।';
    }
  </script>
</body>
</html>

आउटपुट परिदृश्य

1. 'ईमेल आईडी कॉपी करें' बटन से पहले: ईमेल फील्ड केवल-पढ़ने योग्य दिखाता है
2. 'संपर्क करें' ईमेल फील्ड पर क्लिक: "इसे संपादित नहीं किया जा सकता" संदेश
3. 'ईमेल आईडी कॉपी करें' क्लिक: ईमेल क्लिपबोर्ड पर कॉपी हो जाता है

readonly vs disabled

जावास्क्रिप्ट से टॉगल करना

// सेट करना
input.readOnly = true;

// हटाना
input.readOnly = false;

// जांचना
if (input.readOnly) { ... }