36,349 views

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.

By Rnel, on September 07, 2010, under Twitter Tutorials
 

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 character 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.

 

<form method="post" method="post">
	<div>
		<span style="float:left;">
			What's happening?
		</span>
		<span class="charsLeft" style="float:right; color:#ccc; text-align:right;">
			140
		</span>
	</div>
	<div>
		<textarea name="msg" id="msg" style="width:500px;" maxlength="140"></textarea>
	</div>
	<div>
		<input type="submit" value="tweet away" />
	</div>
</form>

 

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

id="msg" should match $('#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

<form method="post" method="post">
	<div>
		<span style="float:left;">
			What's happening?
		</span>
		<span class="charsLeft" style="float:right; color:#ccc; text-align:right;">
			140
		</span>
	</div>
	<div>
		<textarea name="msg" id="msg" style="width:500px;" maxlength="140"></textarea>
	</div>
	<div>
		<input type="submit" value="tweet away" />
	</div>
</form>

 
 

Live Demo

What's happening?

140

Note: The form style has been modified to fit the design of this website. You can also modify the style of the provided HTML form to correspond with your own design or template.