When there is any registration page in html we will create form to create and store the user information entered by user. Form has different types of elements like button, textfield, text, dropdown and TextArea.
TextArea is one of the element in the form which will be used to enter the long text. This TextArea will display the multi line text with multiple rows and columns.
Let create a simple textarea inside form
|
<form id="form_1">
<textarea name="Area"> </textarea>
</form>
|
To set the width and height to the textarea by adding the number of rows and columns count. To do this we will use rows and cols attribute.
|
<form id="form_1">
<textarea rows="4" cols="35" name="Area"> </textarea>
</form>
|
As default character count of the Textarea is " 5,24,288 "
How do we set the limit of the Textarea character count?
We have two ways to limit the character count of textarea inside form
- Maxlength attribute
- Using javascript functions
Maxlength: To limit the character of the Textarea by "maxlength" attribute.
|
<form id="form_1">
<textarea rows="4" cols="35" name="Area" maxlength="50"> </textarea>
</form>
|
This will limit the characters to 50 inside textarea.
Using Javascript functionality
To validate the Textarea character count and alert the user by using the Javascript .
Let create a Javascript function by add the below code
|
<script language="javascript">
function max(txarea)
{
total = 50;
tam = txarea.value.length;
str="";
str=str+tam;
Digit.innerHTML = str;
Remaining.innerHTML = total - str;
if (tam > total){
aux = txarea.value;
txarea.value = aux.substring(0,total);
Digit.innerHTML = total
Remaining.innerHTML = 0
alert("You cannot enter more than 50 characters.");
}
}
</script>
|
Now call this function under onkeyup() and onkeypress() functions of the textarea widget.
|
<textarea onkeyup="max(this)" onkeypress="max(this)" rows="4" cols="35" name="Area"> </textarea>
|
Complete code for Limit the number of characters entered in Textarea
|
<html>
<head>
<style>
body{
background-image: linear-gradient(#009fff, #b0b06f);
color: #FFFDFF;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body bgcolor="#ffff99" style="text-align:center;">
<h1>Textarea Limitation</h1>
<title>javascript Forms - Textarea</title>
<form id="form_1">
<textarea onkeyup="max(this)" onkeypress="max(this)" rows="4" cols="35" name="Area"> </textarea>
<h3>
<font id="Digit" size="22" color="red">0</font> Remaining characters <font id="Remaining" size="22" color="red">50</font>
</h3>
</form>
<script language="javascript">
function max(txarea)
{
total = 50;
tam = txarea.value.length;
str="";
str=str+tam;
Digit.innerHTML = str;
Remaining.innerHTML = total - str;
if (tam > total){
aux = txarea.value;
txarea.value = aux.substring(0,total);
Digit.innerHTML = total
Remaining.innerHTML = 0
alert("You cannot enter more than 50 characters.");
}
}
</script>
</body></html>
|
Conclusion: In this javascript example we learned what is textarea and how to limit the characters of textarea.
