Skip to content
Related Articles

Related Articles

HTML | DOM Input Number readOnly Property
  • Difficulty Level : Basic
  • Last Updated : 11 Mar, 2019

The DOM Input Number readOnly Property is used to set or return whether a number 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.
    numberObject.readOnly
  • It is used to Set the readOnly property.
    numberObject.readOnly = true|false

Property Values:

  • true: It defines that number field is read only.
  • false: It defines that number field is not read only.

Return Value: It returns a boolean value which represent the number field is read only or not.

Example-1:This example illustrates how to return the property.






<!DOCTYPE html> 
<html
  
    <body style="text-align:center;"
  
        <h1 style="color:green;"
            GeeksForGeeks 
        </h1
  
        <h2>DOM Input Number readOnly Property</h2
  
        <input type="number"
            id="myNumber" step="5"
            placeholder="multiples of 5"  readonly> <br><br>
        <button onclick="myFunction()"
            Click Here! 
        </button
  
        <p id="demo" style="font-size:23px;color:green;"></p
  
        <script
            function myFunction() { 
                  
                // Accessing input value 
                var x = 
                document.getElementById("myNumber").readOnly; 
                document.getElementById( 
                "demo").innerHTML = x; 
            
        </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
  
    <body style="text-align:center;"
  
        <h1 style="color:green;"
            GeeksForGeeks 
        </h1
  
        <h2>DOM Input Number readOnly Property</h2
  
        <input type="number"
            id="myNumber" step="5"
            placeholder="multiples of 5"  readonly> <br><br>
        <button onclick="myFunction()"
            Click Here! 
        </button
  
        <p id="demo" style="font-size:23px;color:green;"></p
  
        <script
            function myFunction() { 
                  
                // Accessing input value 
                var x = 
                document.getElementById("myNumber").readOnly = false; 
                document.getElementById("demo").innerHTML = x; 
            
        </script
  
    </body
  
</html>                    

Output:
Before clicking on the button:

After clicking on the button:

Supported Browsers: The browser supported by DOM input number readOnly Property are listed below:

  • Google Chrome
  • Internet Explorer 10.0 +
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :