JS Character Countdown (photo)

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)
oo7mlAsked:
Who is Participating?
 
ravi_kaallaCommented:
<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

0
 
oo7mlAuthor 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

0
 
ravi_kaallaCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ravi_kaallaCommented:
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

0
 
oo7mlAuthor 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
0
 
ravi_kaallaCommented:
I prefer first script
0
 
oo7mlAuthor Commented:
thanks for your help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.