Textarea Character Count using JavaScript

Question

I am implementing a character count for my form's textarea field. I have jQuery currently counting and writing my character statement using this code:

$("#textarea").keyup(function(){
    $("#count").text("Characters left: " + (500 - $(this).val().length));
});

However, I would like to know what is wrong with my JavaScript:

var textarea = document.forms["form"].elements.textarea;

textarea.addEventListener("keypress", textareaLengthCheck, false);

function textareaLengthCheck(textarea) {
var length = textarea.length;
console.log(length);
var charactersLeft = 500 - length;
console.log(charactersLeft);
count.innerHTML = "Characters left: " + charactersLeft;
}

The variable declaration and the event listener are in a jQuery document ready function. I am not sure what I am doing wrong for my event listener or function then.

Thanks

wazz3r · Accepted Answer · 2012-12-30 14:22:40Z

3

The variable textarea is not present in the function's scope, you can refere to it with the this keyword

function textareaLengthCheck() {
    var length = this.value.length;
    var charactersLeft = 500 - length;
    var count = document.getElementById('count');
    count.innerHTML = "Characters left: " + charactersLeft;
}

edited Dec 30, 2012 at 14:22

answered Dec 29, 2012 at 22:46

wazz3r

4724 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ilan Biala Over a year ago

This result gives undefined in the console and in the actual printout, something else isn't working.

wazz3r Over a year ago

Sorry about that, I just copied your code. You need to use this.value to get the actual content. I've updated my answer.

Pointy · Accepted Answer · 2012-12-29 22:43:49Z

2

The handler in your code is not passed the element involved with the event. It's passed an event object. Because you declared the function with a parameter, that hides the variable declared in the outer scope.

The problem is here:

function textareaLengthCheck(textarea) {

You've included a parameter named "textarea" in the function definition. That will be what the symbol means inside the function, so the outer variable also called "textarea" won't be visible inside that function.

Be aware that Firefox, Chrome, and Safari all report an incorrect length for <textarea> values. Those browsers report the length of the textarea as if all explicit line breaks (that is, places where the user hit the "Enter" key) as one character. In fact, when the browsers post a form with a <textarea> in it, all explicit line breaks are converted to two-character sequences (carriage return and line feed). Thus, if you're imposing a maximum length in order to prevent an overflow at the server, it won't work unless you treat line breaks as two characters. To do that, you have to take the value's length, and then add in the number of line breaks in the string (found with a regex or something).

answered Dec 29, 2012 at 22:43

Pointy

415k62 gold badges600 silver badges631 bronze badges

3 Comments

Pointy Over a year ago

@IlanBiala well it looks OK to me :-) However I edited it to add the specific issue.

Ilan Biala Over a year ago

is not passed with... what does that mean?

Pointy Over a year ago

@IlanBiala when the event handler is called, the browser passes an event object as the parameter. It does not pass the element involved with the event (well, the element is passed, but as a property of the event object). Your code is written as if the parameter is the DOM element itself, and it is not.

Kevin Florenz Daus · Accepted Answer · 2013-04-01 13:38:30Z

0

since you are using jquery

how about a plugin

http://keith-wood.name/maxlength.html

$("#limited-textarea").maxlength({
    max: 400
});

answered Apr 1, 2013 at 13:38

Kevin Florenz Daus

5983 gold badges10 silver badges23 bronze badges

1 Comment

Ilan Biala Over a year ago

sorry, but 6 lines vs 3 and an extra file isn't a good trade, good thought though, for something more difficult or intensive, a good plugin could do the trick

Manish Kumar Jaiswal MJ · Accepted Answer · 2017-01-27 18:42:37Z

var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message"></textarea>

Collectives™ on Stack Overflow

Textarea Character Count using JavaScript

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related