In this tutorial we will learn how to Set Textarea maxLength with JavaScript. We can use Textarea maxLength Property to set the dynamic maximum length of textarea element.
Table of Contents
maxLength property
maxLength property sets or returns the value of maxlength attribute of textarea tag.
In this example we have used maxLength property to set the maximum number of characters for textarea tag.
getElementById() method
getElementById() method selects or targets the HTML element by it's id.
In this example getElementById() method is used to select the textarea element with help of it's id.
HTML Code
HTML Code is given below, in this code we have a textarea tag and a button tag.
<!DOCTYPE html>
<html>
<head>
<title>Set Textarea maxLength with JavaScript</title>
</head>
<body>
<textarea id="textarea"></textarea>
<button onclick="setTextareaMaxLength()">Set Textarea Max Length</button>
<script src="script.js"></script>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code, In this code user defined function setTextareaMaxLength() will set the maximum length of characters allowed in textarea.
getElementById() method is used to select the textarea by it's id.
maxLength property will limit the length to the defined number.
<script>
function setTextareaMaxLength()
{
var maxLength = 20;
var textarea = document.getElementById("textarea");
textarea.maxLength = maxLength;
}
</script>
To get the maximum length number from user we can also add input tag to the code.
<!DOCTYPE html>
<html>
<head>
<title>Set Dynamic Textarea maxLength with JavaScript</title>
</head>
<body>
<input type="number" id='input' placeholder="Enter max length">
<textarea id="textarea"></textarea>
<button onclick="setTextareaMaxLength()">Set Textarea Max Length</button>
<script>
function setTextareaMaxLength()
{
var maxLength = document.getElementById("input").value;
var textarea = document.getElementById("textarea");
textarea.maxLength = maxLength;
}
</script>
</body>
</html>
Demo
Video Tutorial
Watch video tutorial on How To Set Textarea maxLength using JavaScript.