Download this sweetcron theme for FREE
If you are a sweetcron user and looking for a theme like this, please take it as a gift from me. Just give me a link back thats all i ask. Thanks for visiting. Hoping to cya around.
Syndication feeds available
Creating a jQuery Word Counter
On a project at work this week, I was creating a form that needed to have word limitations for each textarea. I found a ton of jQuery character counters, but not many word counters, so I decided to create my own.
Planning it all out I really love how when you type more than 140 characters in Twitter; it doesn’t prevent you from typing anymore, it just warns you that you have too many characters.
I definitely wanted to add in that kind of functionality, and here were a couple of things I needed to account for when creating this for the project:
Ability to add in maximum number of words Ability to add in minimum number of words Ability to add in minimum and maximum number of words
I wanted it to be easy to apply the word count to the textarea, so I just wanted to be able to add a class to each textarea and the functionality would be applied. Examples
Maximum of 50 words: class=”count[50]“ Between 50 & 100 words: class=”count[50,100]“ Minimum of 50 words (no maximum): class=”count[50,0]“
That seemed easy and flexible enough to get the job done, so let’s get started on the script. The jQuery First, once the document is loaded, we will use an attribute selector to target each textarea that has a class that starts with count[
$(document).ready(function() { $("[class^='count[']").each(function() { }); });
Next, we are going to create some variables to use later on:
var elClass = $(this).attr('class'); var minWords = 0; var maxWords = 0; var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');
The first 3 lines should be pretty straightforward, just assigning the class value of the textarea to a variable, and defining our minimum and maximum variables. The fourth line may look a little crazy, so let’s walk through that. First, we want to take a substring of our class variable. The start of that substring will be the location of the open bracket, [ (+1 so we don’t actually include the bracket). The end of the substring will be the location of the closing bracket, ]. Then, we want to split the substring on the comma and assign it to an array named countControl. Next, we are going to assign values to our minWords and maxWords variables:
if(countControl.length > 1) { minWords = countControl[0]; maxWords = countControl[1]; } else { maxWords = countControl[0]; }
Then, we want to add in the information about the number of words after the textarea, and if there is a minimum number of words required, assign a class of error:
$(this).after('<div class="wordCount"><strong>0</strong> Words</div>'); if(minWords > 0) { $(this).siblings('.wordCount').addClass('error'); }
In the stylesheet, we also need to add a a style for the error class. Here is what I used:
.error { color: #f00; }
Here is where get into the meat of the script, where we actually do the counting of the words:
$(this).bind('keyup click blur focus change paste', function() { var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords); if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); } });
Ok, let’s go through this piece by piece:
$(this).bind('keyup click blur focus change paste', function() {
This is where we are binding functions to the textarea. I didn’t know you could bind multiple functions in one statement like that, but I just thought of as many actions that a user could take that could trigger a change of words. So basically what this says is that anytime any of those events are triggered, we fill execute the function that we defined. Next, let’s look at this section:
var numWords = jQuery.trim($(this).val()).split(' ').length; if($(this).val() === '') { numWords = 0; } $(this).siblings('.wordCount').children('strong').text(numWords);
Basically, we are just counting the number of spaces and updating our wordCount div that we appended as a sibling to the textarea. If there is nothing in the textarea, we assign a value of 0. This is necessary because if you type words and then go back and delete them all, it still thinks there is 1 word. I have no clue why. Finally, let’s look at this section:
if(numWords < minWords || (numWords > maxWords && maxWords != 0)) { $(this).siblings('.wordCount').addClass('error'); } else { $(this).siblings('.wordCount').removeClass('error'); }
If the number of words is less then the minimum number of words or greater then the maximum number of words (and the maximum number of words is not zero), then we add the class of error to our wordCount div. Otherwise, we remove the class of error. Take a look at the demo to see it in action. That’s it! Nothing too crazy going on and could be customized pretty easily. Anything you would want to add? Done differently? Let me know in the comments.
Via: http://feedproxy.google.com/~r/themeforest/~3/KZgj6tEDCgk/
blog comments powered by Disqus
