HTML | DOM Input Email readOnly Property

Last Updated : 31 Aug, 2022

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>