HTML | DOM Input Email readOnly Property

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 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.

<!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 access input element with  
            type email attribute -->
    <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.

<!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 access input element with  
            type email attribute -->
    <script>  
        function myGeeks() {  
        <!--returning 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
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: