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 maxLength Property
The HTML DOM Textarea maxLength property allows you to get or set the maximum number of characters that can be entered in a textarea element. This property corresponds to the maxlength attribute in HTML and helps control user input length.
Syntax
Following is the syntax to return the maxLength value −
object.maxLength
Following is the syntax to set the maxLength value −
object.maxLength = number
Here, object refers to the textarea element, and number is a positive integer representing the maximum allowed characters.
Return Value
The maxLength property returns a number representing the maximum number of characters allowed in the textarea. If no maxlength attribute is set, it returns -1 by default.
Getting maxLength Value
Following example demonstrates how to retrieve the maxLength value of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Get Textarea maxLength</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Textarea maxLength Property</h2>
<textarea id="myTextarea" maxlength="100" rows="4" cols="50">This textarea has a maximum length of 100 characters.</textarea>
<br><br>
<button onclick="getMaxLength()">Get Max Length</button>
<p id="result"></p>
<script>
function getMaxLength() {
var textarea = document.getElementById("myTextarea");
var maxLen = textarea.maxLength;
document.getElementById("result").innerHTML = "Maximum length: " + maxLen + " characters";
}
</script>
</body>
</html>
The output shows the maximum character limit when the button is clicked −
Textarea maxLength Property [Textarea with sample text] [Get Max Length] Maximum length: 100 characters
Setting maxLength Value
Following example demonstrates how to dynamically change the maxLength property −
<!DOCTYPE html>
<html>
<head>
<title>Set Textarea maxLength</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic maxLength Control</h2>
<textarea id="dynamicTextarea" rows="4" cols="50" placeholder="Type here..."></textarea>
<br><br>
<button onclick="setMaxLength(50)">Set Max Length to 50</button>
<button onclick="setMaxLength(200)">Set Max Length to 200</button>
<button onclick="removeMaxLength()">Remove Limit</button>
<p id="status">Current max length: No limit</p>
<script>
function setMaxLength(limit) {
var textarea = document.getElementById("dynamicTextarea");
textarea.maxLength = limit;
document.getElementById("status").innerHTML = "Current max length: " + limit + " characters";
}
function removeMaxLength() {
var textarea = document.getElementById("dynamicTextarea");
textarea.removeAttribute("maxlength");
document.getElementById("status").innerHTML = "Current max length: No limit";
}
</script>
</body>
</html>
The buttons allow you to dynamically change the character limit of the textarea −
Dynamic maxLength Control [Empty textarea with placeholder] [Set Max Length to 50] [Set Max Length to 200] [Remove Limit] Current max length: No limit
Character Count with maxLength
Following example shows how to implement a character counter that works with the maxLength property −
<!DOCTYPE html>
<html>
<head>
<title>Character Counter with maxLength</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Textarea with Character Counter</h2>
<textarea id="countedTextarea" maxlength="150" rows="5" cols="50"
placeholder="Enter your message (max 150 characters)"
oninput="updateCounter()"></textarea>
<br>
<p id="counter">0 / 150 characters</p>
<script>
function updateCounter() {
var textarea = document.getElementById("countedTextarea");
var currentLength = textarea.value.length;
var maxLength = textarea.maxLength;
document.getElementById("counter").innerHTML = currentLength + " / " + maxLength + " characters";
// Change color when approaching limit
var counter = document.getElementById("counter");
if (currentLength > maxLength * 0.8) {
counter.style.color = "red";
} else if (currentLength > maxLength * 0.6) {
counter.style.color = "orange";
} else {
counter.style.color = "green";
}
}
// Initialize counter on page load
updateCounter();
</script>
</body>
</html>
The character counter updates in real-time and changes color as you approach the limit −
Textarea with Character Counter [Large textarea with placeholder text] 0 / 150 characters (green text)
Key Points
The maxLength property corresponds to the HTML
maxlengthattribute.When no maxlength is set, the property returns
-1.Setting maxLength to a negative number removes the character limit.
The browser automatically prevents users from typing beyond the specified limit.
Programmatic changes to textarea value via JavaScript can exceed maxLength, but user input cannot.
Browser Compatibility
The maxLength property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It provides consistent behavior across different platforms for controlling textarea input length.
Conclusion
The HTML DOM Textarea maxLength property provides an effective way to control and retrieve the maximum character limit for textarea elements. It can be used to get the current limit, set new limits dynamically, and implement user-friendly character counters that enhance the user experience in web forms.
252 Views
