Solved

JS Character Countdown (photo)

Posted on 2012-03-11
7
233 Views
Last Modified: 2012-03-18
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)
0
Comment
Question by:oo7ml
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 1

Accepted Solution

by:
ravi_kaalla earned 500 total points
ID: 37706952
<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
 

Author Comment

by:oo7ml
ID: 37706995
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
 
LVL 1

Expert Comment

by:ravi_kaalla
ID: 37708333
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 1

Expert Comment

by:ravi_kaalla
ID: 37708338
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
 

Author Comment

by:oo7ml
ID: 37709133
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
 
LVL 1

Expert Comment

by:ravi_kaalla
ID: 37709747
I prefer first script
0
 

Author Closing Comment

by:oo7ml
ID: 37709892
thanks for your help
0

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question