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 disabled Property
The HTML DOM Textarea disabled property is used to get or set whether a textarea element is disabled. When disabled, the textarea cannot receive user input and appears grayed out to indicate its inactive state.
Syntax
Following is the syntax for returning the disabled status −
object.disabled
Following is the syntax for setting the disabled status −
object.disabled = true | false
Return Value
The property returns a Boolean value −
- true − The textarea is disabled
- false − The textarea is enabled (default)
Example − Disabling Textarea
Following example demonstrates how to disable a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: lightseagreen;">
<h1>DOM Textarea disabled Property Demo</h1>
<textarea id="myTextarea" placeholder="Hi! I'm placeholder text of a textarea element" rows="8" cols="40"></textarea>
<br><br>
<button onclick="disableTextarea()" style="background: #db133a; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Disable Textarea</button>
<script>
function disableTextarea() {
document.getElementById("myTextarea").disabled = true;
}
</script>
</body>
</html>
The output shows a textarea that becomes disabled when the button is clicked −
Before clicking: Active textarea with placeholder text After clicking: Grayed-out disabled textarea
Example − Toggle Enable/Disable
Following example shows how to toggle the disabled state of a textarea −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Textarea State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Textarea Enable/Disable</h2>
<textarea id="toggleTextarea" rows="4" cols="50">This is sample text in the textarea.</textarea>
<br><br>
<button onclick="toggleState()" style="background: #007bff; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Toggle State</button>
<p id="status">Status: Enabled</p>
<script>
function toggleState() {
var textarea = document.getElementById("toggleTextarea");
var statusText = document.getElementById("status");
if (textarea.disabled) {
textarea.disabled = false;
statusText.textContent = "Status: Enabled";
} else {
textarea.disabled = true;
statusText.textContent = "Status: Disabled";
}
}
</script>
</body>
</html>
The output displays the current status and allows toggling between enabled and disabled states −
Toggle Textarea Enable/Disable [Textarea with sample text] [Toggle State Button] Status: Enabled (changes to "Disabled" when clicked)
Example − Checking Disabled Status
Following example demonstrates how to check if a textarea is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Textarea Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Textarea Disabled Status</h2>
<textarea id="checkTextarea" rows="3" cols="40" placeholder="Enter your message here"></textarea>
<br><br>
<button onclick="disableArea()" style="background: #dc3545; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">Disable</button>
<button onclick="enableArea()" style="background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">Enable</button>
<button onclick="checkStatus()" style="background: #17a2b8; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Check Status</button>
<p id="result"></p>
<script>
function disableArea() {
document.getElementById("checkTextarea").disabled = true;
}
function enableArea() {
document.getElementById("checkTextarea").disabled = false;
}
function checkStatus() {
var textarea = document.getElementById("checkTextarea");
var result = document.getElementById("result");
var status = textarea.disabled ? "disabled" : "enabled";
result.textContent = "Textarea is currently: " + status;
}
</script>
</body>
</html>
The output provides buttons to disable, enable, and check the current status of the textarea −
Check Textarea Disabled Status [Textarea placeholder: Enter your message here] [Disable] [Enable] [Check Status] Textarea is currently: enabled (updates based on current state)
Key Points
- When
disabled = true, the textarea cannot receive focus or user input - Disabled textareas are visually distinguished (usually grayed out)
- The disabled property affects form submission − disabled textareas are not submitted
- The property can be used to conditionally enable/disable textareas based on user actions
- It returns a Boolean value that can be used in conditional statements
Conclusion
The HTML DOM Textarea disabled property provides a simple way to control whether users can interact with textarea elements. It returns a Boolean value indicating the current state and accepts true or false to enable or disable the textarea programmatically.
201 Views
