Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Input URL readOnly Property
  • Difficulty Level : Basic
  • Last Updated : 18 Mar, 2019

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






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




    <!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
    • Internet Explorer 10.0 +
    • Firefox
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
Recommended Articles
Page :