Limit Character Count in Textarea in Jquery

Abhigyan Singh 12th Jul 2020

This tutorial will focus on how to limit character count in textarea in Jquery and a counter will be decremented. Limit the character count in input area in very important in web technology where we are getting data from user and we need to restrict user data up to a fixed character.

This mainly used in user profile, Review or comments. In some cases, If any user provide large amount of input data then sometimes Website design will change and it looks distorted So we need to restrict user to provide fixed amount of input so that deign will same.

Explanation:

Here, we use a simple input box like Textarea and to check the character count we use simple Jquery. In input box user just enter any input and all the other work is done by Jquery.

<script type="text/javascript">
/*============= This is a count of total number to be displayed ==================*/
var setTotalNumberOfWordCounter = "100";
/*============= This is a count of total number to be displayed ==================*/

/*This function first get the value of textarea. And read length of that textarea
charactor. then compare the value of set value.*/

function displayWordCounter(){
var getTextValue = document.frm.dd_fc_comment.value; // Get input textarea value
var getTextLength = getTextValue.length; // Get length of input textarea value
if(getTextLength > setTotalNumberOfWordCounter){ //compare this length with total count
getTextValue = getTextValue.substring(0,setTotalNumberOfWordCounter);
document.frm.dd_fc_comment.value =getTextValue;
return false;
}
document.frm.totalWordLimit.value = (setTotalNumberOfWordCounter-getTextLength);

}

</script>

Let’s explain Jquery:

In the input box like textarea a function occurs onkeyup “onkeyup="return displayWordCounter();"” . When user input any character and up the key this function triggers.

HTML FILE:

<form name="frm" method="POST">
<textarea name="dd_fc_comment" class="main_txt_area" onkeyup="return displayWordCounter();"></textarea><br>
<script type="text/javascript">
document.write("<div class='total_count'>total remaining Charatctor: <input type='text' class='show_count' name='totalWordLimit' size=4 readonly value="+setTotalNumberOfWordCounter+"></div>");
</script>
</form>

In this function, We set maximum number of character to be inserted. Then we get input value and check the length of that input and compare it with previous set value.

If it is greater than we will make substring with previous set value and not allow making more input. Here, for every input value a counter will be decremented. When user input one character then in input box counter will be decremented. This counter will be decremented up to zero.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk