We help IT Professionals succeed at work.

JS Character Countdown (photo)

oo7ml
oo7ml asked
on
Hi, i am trying to find a good JS character countdown script that i can use to count down the characters remaining in a text area field that i am using on my site.

I have done a lot of searching on google but a lot of them seem to have very long scripts and others scripts are over 6 years ago.

Can someone recommend a good, robust character countdown timer that works very well and does not require a lot of resources when it is running. I was hoping to find something similar to the twitter script (please see attached)
Comment
Watch Question

<html>
<body>
	<textarea id="textArea" rows="2" cols="20" onKeyUp="fnTextAreaChanged(this, 30);"></textarea>
	<br/>
	Characters left : <div id="count"></div>

	<script>
		function fnTextAreaChanged(objTA, intMaxLimit)
		{
			var intDiff = intMaxLimit - objTA.value.length;
			document.getElementById("count").innerHTML = intDiff;
		}
	</script>
</body>
</html>

Open in new window

Author

Commented:
Cool, thanks, can i ask what i should be looking for in all the different scripts... this is another one that i got

<html>
<head>
</head>
<body>
<textarea id="comments"></textarea>
<script>
document.getElementById('comments').onkeyup = characterCount;

function characterCount() {
    var container = this.nextSibling;
    if (!container || container.className !== 'counter') {
        container = document.createElement('div');
        container.className = 'counter';
        this.parentNode.insertBefore(container, this.nextSibling);
    }
    container.innerHTML = this.value.length;
}
</script>
</body>
</html>

Open in new window

This one also works fine. But, I recommend the first solution than second one.

Reasons:
1) Readability is better in first solution.
2) "DIV" tag is created on each key stroke which is overhead for JavaScript in second solution.
Below is the modified version of your code(second solution) as you required.
<html>
<head>
</head>
<body>
<textarea id="comments"></textarea>
<script>
document.getElementById('comments').onkeyup = characterCount;

function characterCount() {
	var intMaxCount = 30;
    var container = this.nextSibling;
    if (!container || container.className !== 'counter') {
        container = document.createElement('div');
        container.className = 'counter';
        this.parentNode.insertBefore(container, this.nextSibling);
    }
    container.innerHTML = ("Number of characters left : " + (intMaxCount - this.value.length));
}
</script>
</body>
</html>

Open in new window

Author

Commented:
Ok cool, thanks... so which script out of all of these do you recommend now:

1 - your first script
2 - the script i then posted
3 - your modified version of the script that i posted

Which of the above 3 do you suggest i use, thanks in advance
I prefer first script

Author

Commented:
thanks for your help

Explore More ContentExplore courses, solutions, and other research materials related to this topic.