So I have set the maxlength of my textarea to be 200 and I would like to display a nice countdown function that shows how many characters they have left as they are typing.

My HTML is as follows:

<tr>
    <th width="20%" scope="row" valign="top">Description<div id="characters-left"></div></th>
    <td width="80%"><textarea id="text-area" style="width: 48%" name="poll-description" value="" maxlength="200"></textarea></td>
</tr>

And the JS that I am trying to do it with is like this:

<script>
    window.onload = textareaLengthCheck();

    function textareaLengthCheck() {
    var textArea = document.getElementById('text-area').value.length;
    var charactersLeft = 200 - textArea;
    var count = document.getElementById('characters-left');
    count.innerHTML = "Characters left: " + charactersLeft;
}
</script>

I would rather do this with vanilla javascript as opposed to jQuery if possible. Any ideas?

So I have set the maxlength of my textarea to be 200 and I would like to display a nice countdown function that shows how many characters they have left as they are typing.

My HTML is as follows:

<tr>
    <th width="20%" scope="row" valign="top">Description<div id="characters-left"></div></th>
    <td width="80%"><textarea id="text-area" style="width: 48%" name="poll-description" value="" maxlength="200"></textarea></td>
</tr>

And the JS that I am trying to do it with is like this:

<script>
    window.onload = textareaLengthCheck();

    function textareaLengthCheck() {
    var textArea = document.getElementById('text-area').value.length;
    var charactersLeft = 200 - textArea;
    var count = document.getElementById('characters-left');
    count.innerHTML = "Characters left: " + charactersLeft;
}
</script>

I would rather do this with vanilla javascript as opposed to jQuery if possible. Any ideas?

• javascript
• jquery

Share Improve this question Follow asked Dec 24, 2015 at 12:50 dwinnbrowndwinnbrown 4,03999 gold badges4242 silver badges6161 bronze badges 5

• Any ideas about what? What's the problem you're having? – JJJ Commented Dec 24, 2015 at 12:54
• @Juhana Well it doesn't work. When I type the numbers don't change and if I try alert(textArea); in the console, it says can't find variable. – dwinnbrown Commented Dec 24, 2015 at 12:58
• Shouldn't textareaLengthCheck() be on keypress or keyup of textarea? – Rajesh Commented Dec 24, 2015 at 12:58
• Of course it doesn't find the variable because it's local to the function. – JJJ Commented Dec 24, 2015 at 12:59
• Duplicate of stackoverflow./questions/2136647/… – Mottie Commented Dec 24, 2015 at 13:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can bind event listeners for keyup and keydown like this.

var textarea = document.getElementById('text-area');

textarea.addEventListener('keyup', textareaLengthCheck, false);
textarea.addEventListener('keydown', textareaLengthCheck, false);

See this JSFiddle.

Or you can do what Rajesh suggested using HTML5.

As I have mented, function textareaLengthCheck should be a key event. Following code depicts same:

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

<textarea id="txtInput" onkeypress="textareaLengthCheck(this)"></textarea>
<p id="lblRemainingCount"></p>

On jquery, you can do this

$('#text-area').keyup(function() {
    if ($('#text-area').text().length < 200) {
        $('#characters-left').text('Characters left: ' + (200 - $('#text-area').text().length));
    }
});