Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to limit character input in textarea including count in jQuery?
Suppose the total permitted character is N and the user has entered M characters in the textarea, where N>M. Now only (N-M) characters are left to be entered. After this (N-M) becomes 0, the characters should not be allowed to be entered. In this article, using JQuery, in three different examples, this process of limiting the character input in the textarea is given. In the first example, the maxlength attribute of textarea is used. In example two, the text area is disabled after the required limit is reached and in the third example, the preventDefault is used for the event to prevent further entering the characters, after the specified limit has been reached.
Example 1: Using Jquery and maxlength attribute to limit character input in textarea
Steps Required
Step 1 − Make an html file and start writing the code. Include the required library for JQuery within the script tags.
Step 2 − Inside the body tag, make textarea with id and name specifications .
Step 3 − Specify maxlength equal to 25 for this textarea.
Step 4 − Make a pre tag and give it a class name. The count of how many characters are left to be entered will show inside this.
Step 5 − Inside the script tags, write the jquery function. In the jquery function first make totalcharacters and the maxlength value same. Keep counting the characters left entered and the limit. Also show the result in the pre tags.
Step 6 − Load the HTML file in a browser and check the result.
Step 7 − Enter the characters in the text area. Check that you can’t enter more characters after the limit of 25 is reached.
Code For html file
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" maxlength="25"></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
Example 2: Using Jquery and disable option to limit character input in textarea
Steps Required
Step 1 − Make an html file and start writing the code. Include the required library for JQuery within the script tags.
Step 2 − Inside the body tag, make textarea with id and name specifications .
Step 3 − Make a pre tag and give it a class name. The count of how many characters are left to be entered will show inside this.
Step 4 − Inside the script tags, write the jquery function. In the jquery function first specify the totalcharacters value for the limit. Keep counting the characters left to be entered and the limit. Also show the result in the pre tags.
Step 5 − Put a condition to disable the textarea whenever the limit is reached.
Step 6 − Load the HTML file in a browser and check the result.
Step 7 − Enter the characters in the text area. Check that the textarea is disabled after the limit is reached.
Code For html file
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
document.getElementById('textarrID1').disabled = true;
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
Example 3: Using Jquery and event.preventDefault() to limit character input in textarea
Steps Required
Step 1 − Make an html file and start writing the code. Include the required library for JQuery within the script tags.
Step 2 − Inside the body tag, make textarea with id and name specifications .
Step 3 − Make a pre tag and give it a class name. The count of how many characters are left to be entered will show inside this.
Step 4 − Inside the script tags, write the jquery function. In the jquery function first specify the totalcharacters value for the limit. Keep counting the characters left to be entered and the limit. Also show the result in the pre tags.
Step 5 − Put a condition and call the event.preventDefault() whenever the limit is reached.
Step 6 − Load the HTML file in a browser and check the result.
Step 7 − Enter the characters in the text area. Check that you can’t enter more characters after the specified limit is reached.
Code For html file
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function (event) {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
event.preventDefault();
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
Conclusion
In this HTML and JQuery article, by three different examples, the ways to show how to limit the characters to be entered in a textarea are given. First the method is given where the the maxlength of textarea is used. In the second example, the textarea is disabled after the limit is reached and in the third example, the default event is prevented.
2K+ Views
