Open In App
Related Articles

HTML | DOM Input Email readOnly Property

Improve Article
Improve
Save Article
Save
Like Article
Like

The DOM Input Email readonly Property is used to set or return whether an Email Field should be read-only or not. It means that a user can not modify or changes an content already present in a particular Element (However, a user can tab to it, highlight it, and copy the text from it) whereas a JavaScript can be used to change the read-only value and make the input field editable.

Syntax: 

  • It is used to return the readOnly property.
emailObject.readOnly
  • It is used to set the readOnly property.
emailObject.readOnly = true|false

Property Values: 

  • true: It defines that email field is read only.
  • false: It is the default value. It defines that email field is not read only.

Return Value: It returns a boolean value which represent the email field is read only or not.

Example-1: This example illustrates how to return the property. 

HTML




<!DOCTYPE html>
<html>
    
<head>
    <title>
        HTML DOM Input Email readOnly Property
    </title>
</head>    
<body STYLE="TEXT-ALIGN:CENTER;">
    <h1> GeeksforGeeks</h1>
    <h2>DOM Input Email readOnly Property</h2>
    E-mail: <input type="email" id="email" name="myGeeks"
          readonly> <BR><br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="GFG" style="font-size:20px;color:green;"></p>
     
    <!-- Script to return Input Email readOnly Property -->
    <script>
        function myGeeks() {
        <!--returning the readonly Property -->
            var em = document.getElementById("email").readOnly;
            document.getElementById("GFG").innerHTML =  em;
        }
    </script>
</body>
</html>


Output: 

Before clicking on the button:

  

After clicking on the button: 

 

Example-2: This example illustrates how to set the property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Email readOnly Property
    </title>
</head>    
<body STYLE="TEXT-ALIGN:CENTER;">
    <h1> GeeksforGeeks</h1>
    <h2>DOM Input Email readOnly Property</h2>
    E-mail: <input type="email" id="email" name="myGeeks"
          readonly> <BR><br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="GFG" style="font-size:20px;color:green;"></p>
     
    <!-- Script to set Input Email readOnly Property -->
    <script>
        function myGeeks() {
        <!--setting the readonly Property -->
            var em = document.getElementById("email").readOnly =false;
            document.getElementById("GFG").innerHTML =  em;
        }
    </script>
</body>
</html>


Output: 

Before clicking on the button:

  

After clicking on the button:

  

Supported Browsers: The browser supported by DOM input Email readOnly Property are listed below:

  • Google Chrome 5
  • Edge 12
  • Firefox
  • Opera 11
  • Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 31 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials