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 Object
The HTML DOM Textarea Object represents the <textarea> element in an HTML document. This object provides properties and methods to create, access, and manipulate textarea elements dynamically using JavaScript. The textarea object is commonly used for multi-line text input in forms.
Creating a Textarea Object
You can create a new textarea element using the document.createElement() method −
Syntax
document.createElement("TEXTAREA");
Once created, you can set its properties and append it to the DOM to make it visible on the page.
Properties of Textarea Object
The textarea object provides numerous properties to control its appearance and behavior −
| Property | Description |
|---|---|
| autofocus | Sets or returns whether the textarea should automatically get focus when the page loads. |
| cols | Sets or returns the value of the cols attribute (visible width in characters). |
| defaultValue | Sets or returns the default value of the textarea element. |
| disabled | Sets or returns whether the textarea is disabled. |
| form | Returns a reference to the form that contains the textarea. |
| maxLength | Sets or returns the maximum number of characters allowed in the textarea. |
| name | Sets or returns the value of the name attribute. |
| placeholder | Sets or returns the placeholder text displayed when the textarea is empty. |
| readOnly | Sets or returns whether the textarea content should be read-only. |
| required | Sets or returns whether the textarea must be filled before submitting the form. |
| rows | Sets or returns the value of the rows attribute (visible height in lines). |
| type | Returns the type of form element (always "textarea"). |
| value | Sets or returns the content of the textarea. |
| wrap | Sets or returns how text wraps in the textarea (hard, soft, or off). |
Methods of Textarea Object
The textarea object provides the following method −
| Method | Description |
|---|---|
| select() | Selects all the text content in the textarea. |
Creating Textarea with JavaScript
Following example demonstrates how to create a textarea element dynamically and set its properties −
<!DOCTYPE html>
<html>
<head>
<title>DOM Textarea Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>DOM Textarea Object Demo</h2>
<button onclick="createTextarea()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Create Textarea</button>
<div id="container" style="margin-top: 20px;"></div>
<script>
function createTextarea() {
var textarea = document.createElement("TEXTAREA");
textarea.value = "This is a dynamically created textarea element.";
textarea.rows = 5;
textarea.cols = 50;
textarea.placeholder = "Enter your text here...";
var container = document.getElementById("container");
container.appendChild(textarea);
}
</script>
</body>
</html>
The output displays a button that creates a textarea when clicked −
DOM Textarea Object Demo [Create Textarea] (After clicking button, a textarea appears with placeholder text and default content)
Accessing Textarea Properties
Following example shows how to access and modify various properties of an existing textarea −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Properties Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Textarea Properties Demo</h2>
<textarea id="myTextarea" rows="4" cols="40" placeholder="Type something here...">Initial content</textarea>
<div style="margin-top: 15px;">
<button onclick="showProperties()" style="padding: 8px 16px; margin: 5px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Properties</button>
<button onclick="selectText()" style="padding: 8px 16px; margin: 5px; background: #ffc107; color: black; border: none; border-radius: 4px; cursor: pointer;">Select Text</button>
<button onclick="disableTextarea()" style="padding: 8px 16px; margin: 5px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Disable</button>
</div>
<div id="output" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px;"></div>
<script>
function showProperties() {
var textarea = document.getElementById("myTextarea");
var output = document.getElementById("output");
output.innerHTML =
"<strong>Textarea Properties:</strong><br>" +
"Value: " + textarea.value + "<br>" +
"Rows: " + textarea.rows + "<br>" +
"Cols: " + textarea.cols + "<br>" +
"Placeholder: " + textarea.placeholder + "<br>" +
"Disabled: " + textarea.disabled;
}
function selectText() {
var textarea = document.getElementById("myTextarea");
textarea.select();
}
function disableTextarea() {
var textarea = document.getElementById("myTextarea");
textarea.disabled = !textarea.disabled;
var button = event.target;
button.textContent = textarea.disabled ? "Enable" : "Disable";
}
</script>
</body>
</html>
This example demonstrates accessing textarea properties, selecting text content, and toggling the disabled state. The "Show Properties" button displays current property values in the output area.
Form Integration Example
Following example shows how textarea objects work within forms −
<!DOCTYPE html>
<html>
<head>
<title>Textarea in Form Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; max-width: 600px;">
<h2>Contact Form with Textarea</h2>
<form id="contactForm" onsubmit="handleSubmit(event)" style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
<label for="message" style="display: block; margin-bottom: 8px; font-weight: bold;">Message:</label>
<textarea id="message" name="message" rows="6" cols="50"
placeholder="Enter your message here..."
maxlength="200"
required
style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></textarea>
<div style="margin-top: 10px; color: #666; font-size: 14px;">
Characters remaining: <span id="charCount">200</span>
</div>
<button type="submit" style="margin-top: 15px; padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Submit</button>
</form>
<div id="result" style="margin-top: 20px;"></div>
<script>
var textarea = document.getElementById("message");
var charCount = document.getElementById("charCount");
textarea.addEventListener("input", function() {
var remaining = 200 - this.value.length;
charCount.textContent = remaining;
charCount.style.color = remaining < 20 ? "red" : "#666";
});
function handleSubmit(event) {
event.preventDefault();
var message = textarea.value;
document.getElementById("result").innerHTML =
"<strong>Form submitted!</strong><br>Message: " + message;
}
</script>
</body>
</html>
This example shows a textarea integrated with a form, including character counting, validation, and form submission handling. The character counter updates in real-time and changes color when approaching the limit.
Conclusion
The HTML DOM Textarea Object provides comprehensive control over <textarea> elements through JavaScript. With its various properties like value, rows, cols, and methods like select(), you can dynamically create, modify, and interact with textarea elements to build interactive web forms and text input interfaces.
508 Views
