Open In App

HTML | DOM Input URL readOnly Property

Last Updated : 26 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report
The DOM Input URL readOnly Property is used to set or return whether a URL Field should be read-only or not. It means that a user can not modify or changes the 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.
    urlObject.readOnly
  • It is used to Set the readOnly property.
    urlObject.readOnly = true|false
  • Property Values:
    • true: It defines that url field is read only.
    • false: It is the default value. It defines that url field is not read only.
    Return Value: It returns a boolean value which represent the URL field is read only or not. Example-1: This Example illustrates how to return the Property. html
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>
            DOM Input URL readOnly Property
        </title>
    </head>
    
    <body>
        <center>
            <h1 style="color:green;"> 
                    GeeksForGeeks 
                </h1>
    
            <h2>
              DOM Input URL readOnly Property
          </h2>
    
            <label for="uname" 
                   style="color:green">
                <b>Enter URL</b>
            </label>
    
            <input type="url" 
                   id="gfg" 
                   placeholder="Enter URL" 
                   size="20" 
                   readonly>
    
            <br>
            <br>
    
            <button type="button"
                    onclick="geeks()">
                Click
            </button>
    
            <p id="GFG"
               style="color:green;
                      font-size:25px;">
          </p>
    
            <script>
                function geeks() {
                    var link = 
                        document.getElementById(
                          "gfg").readOnly;
                  
                    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. html
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>
            DOM Input URL readOnly Property
        </title>
    </head>
    
    <body>
        <center>
            <h1 style="color:green;"> 
                    GeeksForGeeks 
                </h1>
    
            <h2>
              DOM Input URL readOnly Property
          </h2>
    
            <label for="uname"
                   style="color:green">
                <b>Enter URL</b>
            </label>
    
            <input type="url"
                   id="gfg"
                   placeholder="Enter URL" 
                   size="20" 
                   readonly>
    
            <br>
            <br>
    
            <button type="button" 
                    onclick="geeks()">
                Click
            </button>
    
            <p id="GFG" 
               style="color:green;font-size:25px;">
          </p>
    
            <script>
                function geeks() {
                  
                    // Set the read only property.
                    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 URL readOnly Property are listed below:
    • Google Chrome 1
    • Edge 12
    • Firefox
    • Opera 11
    • Safari

    Next Article
    Practice Tags :

Similar Reads