[How To] Character Counter (jQuery)

[How To] Character Counter (jQuery) - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: [How To] Character Counter (jQuery) (/Thread-How-To-Character-Counter-jQuery)

[How To] Character Counter (jQuery) - Sanctuary - 07-17-2013

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! Smile

CSS is optional, but is always nice to have.

RE: [How To] Character Counter (jQuery) - Banadmin - 07-17-2013

Nice tutorial. We could do this with PHP too by using the string length function but this is just as effective.
Thanks, Sanc. Confused

mile:

PHP Code:
echo strlen($word); 

Edit: jQuery is probably the better option as it's a lot smoother and is eye candy.

RE: [How To] Character Counter (jQuery) - Judas - 07-17-2013

Nice tutorial Sanc, I'll try this out when I have time.

RE: [How To] Character Counter (jQuery) - Sanctuary - 07-17-2013

Thanks guys. Smile

And yeah, I read somewhere about the sterl function in PHP, it's an alternative to this.
I'll make a tutorial on how to make a Word Counter as soon as I found out how, since those have more use. Tongue

RE: [How To] Character Counter (jQuery) - Banadmin - 07-17-2013

(07-17-2013, 04:03 PM)Sanctuary Wrote: Thanks guys. And yeah, I read somewhere about the sterl function in PHP, it's an alternative to this.
I'll make a tutorial on how to make a Word Counter as soon as I found out how, since those have more use.

PHP Code:
<?php
echo str_word_count("This line of code will display the number nine");
?>

:tongue:

Edit: http://www.discussionzone.net/Thread-How-To-Word-Counter