[Sanctuary]

Final result demo: http://imsanctuary.info/jq/char/

First, we'll start with our basic HTML doc.

Spoiler:

Code:

<!doctype html> <html lang="en"> <head> <title> Character Counter </title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <script type="text/javascript" src="charCount.js"></script> </body> </html>

Now add a textarea inside the <body> tags, for the text
The code for it would be:

Spoiler:

Code:

<textarea id="text" cols="60" rows="15" placeholder="Type here..."></textarea>

Now, we're going to add a <div> to display the number of characters we're typing.
Add this code below (or above, your choice) the <textarea> tags.

Spoiler:

Code:

<div> <p>Characters: <span id="num">0</span></p> </div>

Now you're going to make a new file named "charCount.js".
This will be the entire code inside that file (I'll explain what it does with comments):

Spoiler:

Code:

$('#text').keyup(function() { // When we type/del a char, the number changes var text = $('#text').val().length; // Taking the number from the textarea and giving us the length of it $('#num').html(text); // Displays the number of characters we've typed });

Save that, and you're done!
CSS is optional, but is always nice to have.