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?