Count textarea characters

$("#textarea").keyup(function(){  $("#count").text($(this).val().length);});

The above will do what you want. If you want to do a count down then change it to this:

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

Alternatively, you can accomplish the same thing without jQuery using the following code. (Thanks @Niet)

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

⚠️ The accepted solution is outdated.

Here are two scenarios where the keyup event will not get fired:

1. The user drags text into the textarea.
2. The user copy-paste text in the textarea with a right click (contextual menu).

Use the HTML5 input event instead for a more robust solution:

<textarea maxlength='140'></textarea>

JavaScript (demo):

const textarea = document.querySelector("textarea");textarea.addEventListener("input", event => {    const target = event.currentTarget;    const maxLength = target.getAttribute("maxlength");    const currentLength = target.value.length;    if (currentLength >= maxLength) {        return console.log("You have reached the maximum number of characters.");    }        console.log(`${maxLength - currentLength} chars left`);});

And if you absolutely want to use jQuery:

$('textarea').on("input", function(){    var maxlength = $(this).attr("maxlength");    var currentLength = $(this).val().length;    if( currentLength >= maxlength ){        console.log("You have reached the maximum number of characters.");    }else{        console.log(maxlength - currentLength + " chars left");    }});

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

You are calling textareaLengthCheck and then assigning its return value to the event listener. This is why it doesn't update or do anything after loading. Try this:

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

Aside from that:

var length = textarea.length;

textarea is the actual textarea, not the value. Try this instead:

var length = textarea.value.length;

Combined with the previous suggestion, your function should be:

function textareaLengthCheck() {    var length = this.value.length;    // rest of code};