One line jQuery Twitter like dynamic character counter function

28,432 views | 07-September-2010 | Home > Twitter Tutorials | View online demo
 
 

Since now that I have Registered my Twitter Application and already got my single access token secured. I can now proceed and build my first Twitter Application and this Twitter Tutorial will let you know one of the components I've made that will be included on the Twitter Application that I will be creating.

This is the Twitter like character counter. I've made this lite and easy single line function on jQuery. A sample demo is shown below for you to see how it actually works and therefore give you an idea how will I use it on my Twitter Application.

As you know only 140 characters are allowed to be sent in on twitter status and this component will count the character that the current user is key-ing and will show the remaining characters out the 140 limit. This will obviously also won't allow any further character input once the limit is reached.

 
  • Required file: jQuery LINK
  • Download the file: LINK
 
 

jQuery script:

 

Although this twitter letter counter I wrote is only a one line jQuery function it still consists of several parts. I will tell you what are those parts on this jQuery script and what are the function of each part. But first of all like every jQuery scripts you need to initialize it to make an event work on the page. Here's how I initialze it.

			$(document).ready(function(){
				$('#msg').keyup(function(){ });
			});
		

The code above call the event inside the $(document).ready() function. That makes me sure that the event I am going to use will work on the page.

The event that I am going to use is the .keyup() event. I need this to send the event to an element when a user releases a key on the keyboard. That way the script can monitor whenever the current user enter any character on the textarea and therefore perform the "character counter" formula.

 

First part: Declaire the limit variable

This piece of code will get the value of the maxlength attribute of the textarea.

			var limit = $(this).attr('maxlength');
		

 

Second part: Perform the conditional statement

Here it checks the number of characters inside the textarea and compare it with the previously declaired limit variable.

			($(this).val().length < limit)
		

 

Third part: Display remaining characters if the result of the statement is TRUE

If the condition is met, subtract 1 from the remaining characters and display it on the form.

			$('.charsLeft').html(limit-$(this).val().length)
		

 

Last part: Prohibit any additional character inputs when the limit is reached.

This will perform two actions. The first one will make sure that the total characters inside the textarea is equal to the limit. While the second action displays the total remaining charater in a red color, to send out a message to the current user that the limit has been reached.

			$(this).val($(this).val().substr(0,limit)) + $('.charsLeft').html('0');
		

 
 

HTML Form

 

This is a basic HTML form.

 

			
What's happening?140

 

Make sure you update the jquery function if you are going to edit the textarea id.

id="msg" should matched $('#msg')

 

Full code:

jQuery

	    	<script type="text/javascript"?>
			$(document).ready(function(){
				$('#msg').keyup(function(){ var limit = $(this).attr('maxlength'); ($(this).val().length < limit) ? $('.charsLeft').html(limit-$(this).val().length) : $(this).val($(this).val().substr(0,limit)) + $('.charsLeft').html('0');});
			});
			<script?>
		

 

HTML

			
What's happening?140

 
 
 
 
 
 
 
 

Free download files

Author

Rnel - www.rnel.net

The Editor of RNELdotNET. A senior web developer who spends most of his time in front of the computer doing more coding and editing. He aspires to be a PHP and Javascript ninja soon.

 
 
View all author articles

Other articles from the author

Article discussions

blog comments powered by Disqus
 
 
 
loading...
 
 
Photoshop Tutorials | Php Tutorials | Cinema 4D Tutorials | 3D Studio Max Tutorials | Illustrator Tutorials | Twitter Tutorials | After Effects Tutorials | Corel Draw Tutorials