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 cols Property
The HTML DOM Textarea cols property gets and sets the value of the cols attribute of a textarea element. The cols attribute specifies the visible width of a textarea in average character widths.
The cols property is useful for dynamically adjusting textarea dimensions through JavaScript, allowing you to change the visual width of text areas based on user interactions or content requirements.
Syntax
Following is the syntax to return the cols value −
textareaObject.cols
Following is the syntax to set the cols value −
textareaObject.cols = number
Here, number is a positive integer representing the number of character widths for the textarea.
Return Value
The cols property returns a number representing the number of columns (character widths) of the textarea element. If no cols attribute is specified in the HTML, it returns the default value which varies by browser (typically 20).
Example − Getting Textarea Columns
Following example demonstrates how to get the current cols value of a textarea −
<!DOCTYPE html>
<html>
<head>
<title>Get Textarea Cols Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Textarea Cols Value</h2>
<textarea id="myTextarea" cols="30" rows="4">This textarea has 30 columns initially.</textarea>
<br><br>
<button onclick="getCols()">Get Cols Value</button>
<p id="result"></p>
<script>
function getCols() {
var textarea = document.getElementById("myTextarea");
var colsValue = textarea.cols;
document.getElementById("result").textContent = "Current cols value: " + colsValue;
}
</script>
</body>
</html>
The output shows the current cols value when the button is clicked −
Current cols value: 30
Example − Setting Textarea Columns
Following example shows how to dynamically change the textarea width using the cols property −
<!DOCTYPE html>
<html>
<head>
<title>Set Textarea Cols Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Textarea Width Control</h2>
<textarea id="dynamicTextarea" rows="4">Watch me change width! This textarea will resize when you click the buttons below.</textarea>
<br><br>
<button onclick="setSmall()">Small (20 cols)</button>
<button onclick="setMedium()">Medium (40 cols)</button>
<button onclick="setLarge()">Large (60 cols)</button>
<p id="status"></p>
<script>
function setSmall() {
document.getElementById("dynamicTextarea").cols = 20;
document.getElementById("status").textContent = "Cols set to 20";
}
function setMedium() {
document.getElementById("dynamicTextarea").cols = 40;
document.getElementById("status").textContent = "Cols set to 40";
}
function setLarge() {
document.getElementById("dynamicTextarea").cols = 60;
document.getElementById("status").textContent = "Cols set to 60";
}
</script>
</body>
</html>
Clicking the buttons dynamically resizes the textarea width. The status message confirms the current cols value.
Example − Interactive Textarea Resizer
Following example creates an interactive textarea with input controls to adjust both cols and content −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Textarea Cols Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Interactive Textarea Resizer</h2>
<label for="colsInput">Set Cols Value: </label>
<input type="number" id="colsInput" value="30" min="10" max="100">
<button onclick="applyCols()">Apply</button>
<br><br>
<textarea id="interactiveTextarea" cols="30" rows="5">Type your content here. Adjust the cols value above and click Apply to see the width change dynamically.</textarea>
<br><br>
<div id="info">Current cols: <span id="currentCols">30</span></div>
<script>
function applyCols() {
var newCols = document.getElementById("colsInput").value;
var textarea = document.getElementById("interactiveTextarea");
textarea.cols = newCols;
document.getElementById("currentCols").textContent = newCols;
}
// Update display on page load
document.getElementById("currentCols").textContent =
document.getElementById("interactiveTextarea").cols;
</script>
</body>
</html>
This example allows users to enter any cols value between 10 and 100, providing real-time feedback on the current setting.
Key Points
The cols property accepts positive integer values representing character widths.
Default cols value is typically 20 if not specified, but this may vary by browser.
Setting cols to 0 or negative values may produce unexpected results.
The cols property only affects the visual width; it does not limit the amount of text that can be entered.
CSS width properties can override the cols attribute styling.
Conclusion
The HTML DOM Textarea cols property provides a JavaScript interface to control the visible width of textarea elements. It accepts numeric values representing character widths and can be used to create dynamic, responsive text input areas that adapt to user needs or content requirements.
162 Views
