+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: [How To] Word Counter (jQuery) (/Thread-How-To-Word-Counter-jQuery)
[How To] Word Counter (jQuery) - Sanctuary - 07-18-2013
If you haven't already, check out my tutorial on how to make a character counter with jQuery (it's almost identical to this one!):
http://www.discussionzone.net/Thread-How-To-Character-Counter-jQuery
Final result demo: http://imsanctuary.info/jq/word/
First, we'll start with our basic HTML doc.
Spoiler:
Code:
<!doctype html>
<html lang="en">
<head>
<title> Word Counter </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
<body>
<script type="text/javascript" src="wordCount.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>Word: <span id="num">0</span></p>
</div>Now you're going to make a new file named "wordCount.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().replace(/\s+/gi, ' ').split(' ').length; // Taking the number of words 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!
