Open In App
Related Articles

HTML | DOM Input Time readOnly Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
The DOM Input Time readOnly Property in HTML DOM is used to set or return whether the Time Field should be read-only or not. It means that a user can not modify or changes a 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.
    timeObject.readOnly
  • It is used to set the readOnly property.
    timeObject.readOnly = true|false
Property Values:
  • true: It defines that Time field is read only.
  • false: It defines that Time field is not read only. It is false by default.
Return Value: It returns a boolean value which represent the Time field is read only or not. Example-1: This example illustrates how to return the property.
<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM Input Time readOnly Property
    </title>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
                GeeksForGeeks 
            </h1>
  
        <h2>
          DOM Input Time readOnly Property
      </h2>
  
        <label for="uname"
               style="color:green">
            <b>Enter time</b>
        </label>
  
        <input type="time" 
               id="gfg"
               placeholder="Enter time"
               readonly>
  
        <br>
        <br>
  
        <button type="button" 
                onclick="geeks()">
            Click
        </button>
  
        <p id="GFG"
           style="font-size:24px;
                  color:green;">
      </p>
  
        <script>
            function geeks() {
                
                var link = 
                    document.getElementById(
                      "gfg").value;
                
                document.getElementById(
                  "GFG").innerHTML = link;
            }
        </script>
    </center>
</body>
  
</html>

                    
Output: Before Clicking On Button: After Clicking On Button: Example-2: This Example illustrates how to set the Property.
<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM Input Time readOnly Property
    </title>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
                GeeksForGeeks 
            </h1>
  
        <h2>
          DOM Input Time readOnly Property
      </h2>
  
        <label for="uname"
               style="color:green">
            <b>Enter time</b>
        </label>
  
        <input type="time" 
               id="gfg"
               placeholder="Enter time" 
               step="5"
               readonly>
  
        <br>
        <br>
  
        <button type="button" 
                onclick="geeks()">
            Click
        </button>
  
        <p id="GFG"
           style="font-size:24px;
                  color:green'">
      </p>
  
        <script>
            function geeks() {
                
                var link = 
                    document.getElementById(
                  "gfg").readOnly = "false";
                
                document.getElementById(
                  "GFG").innerHTML = link;
            }
        </script>
    </center>
</body>
  
</html>

                    
Output : Before Clicking On Button : After Clicking On Button: Supported Browsers: The browser supported by DOM input Time readOnly property listed below:
  • Google Chrome
  • Internet Explorer 10.0 +
  • Firefox
  • Opera
  • Safari


Last Updated : 14 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads