Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Textarea readOnly Property
The HTML DOM Textarea readOnly property sets or returns whether a textarea element is read-only. When set to true, users cannot modify the textarea content, but they can still select and copy the text. This property is useful for displaying non-editable content in textarea format while preserving the element's visual appearance.
Syntax
Following is the syntax for getting the readOnly property −
textareaObject.readOnly
Following is the syntax for setting the readOnly property −
textareaObject.readOnly = true | false
Return Value
The property returns a boolean value −
-
true− The textarea is read-only -
false− The textarea is editable (default)
Example − Toggle ReadOnly Property
Following example demonstrates how to toggle the readOnly property of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Textarea ReadOnly Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f8ff;
}
textarea {
width: 100%;
max-width: 400px;
margin: 10px 0;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
}
.readonly {
background-color: #f5f5f5;
border-color: #999;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>DOM Textarea readOnly Property</h1>
<textarea id="myTextarea" rows="5" cols="50">
This is a sample textarea content. Click the buttons below to toggle between read-only and editable modes.
</textarea>
<br>
<button onclick="makeReadOnly()">Make Read Only</button>
<button onclick="makeEditable()">Make Editable</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function makeReadOnly() {
var textarea = document.getElementById("myTextarea");
textarea.readOnly = true;
textarea.classList.add("readonly");
document.getElementById("status").innerHTML = "Textarea is now READ-ONLY";
}
function makeEditable() {
var textarea = document.getElementById("myTextarea");
textarea.readOnly = false;
textarea.classList.remove("readonly");
document.getElementById("status").innerHTML = "Textarea is now EDITABLE";
}
function checkStatus() {
var textarea = document.getElementById("myTextarea");
var status = textarea.readOnly ? "READ-ONLY" : "EDITABLE";
document.getElementById("status").innerHTML = "Current status: " + status;
}
</script>
</body>
</html>
The textarea starts as editable. Use the buttons to change its state and observe how the appearance and functionality change −
This is a sample textarea content. Click the buttons below to toggle between read-only and editable modes. [Make Read Only] [Make Editable] [Check Status] Current status: EDITABLE
Example − Form Validation with ReadOnly
Following example shows how to use the readOnly property in form validation scenarios −
<!DOCTYPE html>
<html>
<head>
<title>ReadOnly in Form Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Agreement Form</h2>
<form>
<label for="terms">Terms and Conditions:</label><br>
<textarea id="terms" rows="6" cols="60" readonly>
By using this service, you agree to:
1. Comply with all applicable laws
2. Respect other users' privacy
3. Not engage in harmful activities
4. Accept our privacy policy
This agreement is effective immediately upon acceptance.
</textarea><br><br>
<label for="userInput">Your Comments (Optional):</label><br>
<textarea id="userInput" rows="3" cols="60" placeholder="Enter your comments here..."></textarea><br><br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
<p id="message"></p>
<script>
function submitForm() {
var termsArea = document.getElementById("terms");
var userArea = document.getElementById("userInput");
if (termsArea.readOnly) {
document.getElementById("message").innerHTML =
"Form submitted! Terms were read-only as expected. User comments: '" +
userArea.value + "'";
}
}
</script>
</body>
</html>
The first textarea displays terms that users cannot modify, while the second allows user input −
Terms and Conditions: By using this service, you agree to: 1. Comply with all applicable laws 2. Respect other users' privacy 3. Not engage in harmful activities 4. Accept our privacy policy This agreement is effective immediately upon acceptance. Your Comments (Optional): [Enter your comments here...] [Submit]
Using ReadOnly with HTML Attribute
The readOnly property corresponds to the HTML readonly attribute. You can set it directly in HTML or manipulate it with JavaScript −
<textarea readonly>This content cannot be edited</textarea> <textarea>This content can be edited</textarea>
Key Differences: ReadOnly vs Disabled
| ReadOnly Property | Disabled Property |
|---|---|
| Content can be selected and copied | Content cannot be selected or copied |
| Element receives focus | Element cannot receive focus |
| Form data is submitted | Form data is not submitted |
| Styling remains normal | Usually appears grayed out |
| Accepts keyboard navigation | Skipped in keyboard navigation |
Conclusion
The HTML DOM Textarea readOnly property provides a way to control whether users can modify textarea content while preserving its appearance and allowing text selection. It returns a boolean value and can be dynamically changed using JavaScript, making it ideal for creating flexible forms and user interfaces that need conditional editing capabilities.
275 Views
