HTML | DOM Input Text readOnly Property
The Input Text readOnly property in HTML DOM is used to set or return whether a text 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 returns the readOnly property.
textObject.readOnly
- it is used to Set the readOnly property.
textObject.readOnly = true|false
Property Values: It accepts two value which are listed below:
- true: It defines that the text field is read only.
- false: It is the default value. It defines that the text field is not read only.
Return Value: It returns a boolean value which represent the text field is read only or not.
Example 1: This example illustrates how to return Input Text readOnly property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Text readOnly Property </ title > </ head > < body style = "text-align:center;" > < h1 >w3wiki</ h1 > < h2 >DOM Input Text readOnly Property</ h2 > < form id = "myBeginner" > < input type = "text" id = "text_id" readonly> </ form >< br > < button onclick = "myBeginner()" >Click Here!</ button > < p id = "GFG" style = "font-size:25px;" ></ p > <!-- script to return the readOnly Property--> < script > function myBeginner() { var txt = document.getElementById("text_id").readOnly; document.getElementById("GFG").innerHTML = txt; } </ script > </ body > </ html > |
Output:
Before Clicking the Button:
After Clicking the Button:
Example 2: This example illustrates how to set Input Text readOnly property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Text readOnly Property </ title > </ head > < body style = "text-align:center;" > < h1 >w3wiki</ h1 > < h2 >DOM Input Text readOnly Property</ h2 > < form id = "myBeginner" > < input type = "text" id = "text_id" readonly> </ form >< br > < button onclick = "myBeginner()" >Click Here!</ button > < p id = "GFG" style = "font-size:25px;" ></ p > <!-- script to set the readOnly Property--> < script > function myBeginner() { var txt = document.getElementById("text_id").readOnly = false; document.getElementById("GFG").innerHTML = txt; } </ script > </ body > </ html > |
Output:
Before Clicking the Button:
After Clicking the Button:
Supported Browsers: The browser supported by DOM Input Text readOnly Property are listed below:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera
- Safari 1