Get length of text area

Question

I would like to add below my textarea the length of the written text.

For this purpose I have defined a span element to write my characters.

However, I currently get the following error:

Uncaught ReferenceError: len is not defined

Find below my viable example:

 $(".form-control.description").keyup(this.countCharacters.bind(this)) function countCharacters() { len = $(".form-control.rigDesc").val().length $(".remainChar").html("#" + len); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group row" align="left"> <div class="col-7"> <textarea class="form-control rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea> <span class="remainChar"></span> </div> </div> 

Any suggestions how to capture the length of the textarea field?

I appreciate your replies!

Answer 1

You are missing the class description in your textarea as you have used $(".form-control.description") in your keyup event which seeks for the element with class form-control and description so you need to add description class in your textarea .

 $(".form-control.description").keyup(this.countCharacters.bind(this)) function countCharacters() { len = $(".form-control.rigDesc").val().length $(".remainChar").html("#" + len); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group row" align="left"> <div class="col-7"> <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea> <span class="remainChar"></span> </div> </div> 

For more accuracy and preventing unintentional error you can use $("textarea.form-control.description") to make sure the keyup event is only for textarea with class form-control and description .

 $("textarea.form-control.description").keyup(this.countCharacters.bind(this)) function countCharacters() { len = $(".form-control.rigDesc").val().length $(".remainChar").html("#" + len); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group row" align="left"> <div class="col-7"> <textarea class="form-control description rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea> <span class="remainChar"></span> </div> </div> 

Answer 2

Your code was binding the keyup to the wrong selector. I have fixed that and also ensured that len is a local and not global variable. See below:

 $(".form-control").keyup(this.countCharacters.bind(this)) function countCharacters() { var len = $(".form-control.rigDesc").val().length; $(".remainChar").html("#" + len); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group row" align="left"> <div class="col-7"> <textarea class="form-control rigDesc" rows="4" id="comment" placeholder="Describe..."></textarea> <span class="remainChar"></span> </div> </div>