A Word Counter Class for jQuery

I recently had to come up with an Object Oriented approach to a word counter.  I personally LOVE the MooTools framework, which makes OO so much easier, but since the project was mainly developed in jQuery, I had to stick with what was there.  So I developed a little Class called Word Count which can count words, characters, and characters left.

Here is an example of the implementation

HTML:

<h3>Word Count</h3>
<textarea id="TextField_1"></textarea>
<span id="WordCount_1">0</span>
<hr />
<h3>Character Count (with Spaces)</h3>
<textarea  id="TextField_2"></textarea>
<span id="WordCount_2">0</span>
<hr />
<h3>Character Count (ignoring spaces)</h3>
<textarea id="TextField_4"></textarea>
<span id="WordCount_4">0</span>
<hr />
<h3>Character Countdown</h3>
<textarea id="TextField_3"></textarea>
<span id="WordCount_3">1000</span>

Implementation Javascript:

        <script type="text/javascript">
            $(document).ready( function() {
                	$('#TextField_1').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_1'));
                        wc.getWordCount();
                    });
                    $('#TextField_2').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_2'));
                        wc.getCharCount(false);
                    });
                    $('#TextField_3').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_3'));
                        var count = wc.getCharCountdown(1000);
                        if( count == 990 ) alert( 'hit' );
                    });
                    $('#TextField_4').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_4'));
                        wc.getCharCount(true);
                    });
            });
        </script>

jQuery Class:

/* jQuery Word Counter */
function WordCount() {
	//Private Members & Menthods
	var target;
	var outputTo;

	//Function Custom Trim
	var customTrim = function ( value )	{
	    return value.replace( /^\s+|\s+$/g, '' );
	};

	//Function Update Output
	var updateOutput = function ( value ) {
		outputTo.html( value );
	};
	//Remove Repeating Spaces
	var removeSpaces = function( value ) {
		while ( value.indexOf('  ') > -1 )
		{
			value = value.split('  ').join(' ');
		}
		return value;
	};
	//Public Members & Menthods
	return {
		//Function Set Target Div
		setTarget: function(newTarget) {
			target = newTarget;
		},
		//Function Set Output Div/Span
		setOutput: function(newOutput) {
			outputTo = newOutput;
		},
		//Function Get Word Count
		getWordCount: function() {
			var trimmed = customTrim(target.val());
			trimmed = removeSpaces( trimmed );
			if( trimmed.length < 1 ){
		    	updateOutput( 0 );
		    }
		    else {
		    	updateOutput( trimmed.split(' ').length );
		    }
		},
		//Function Get Character Count
		getCharCount: function( noSpaces ) {

			var spaces = 0;
			var trimmed = target.val();
			if( noSpaces === true )
			{
				trimmed = customTrim(target.val());
				trimmed = removeSpaces( trimmed );
				spaces = trimmed.split(' ').length-1;
			}
		    if( trimmed.length < 1 ){
		    	updateOutput( 0 );
		    }
		    else {
		    	updateOutput( trimmed.length - spaces );
		    }
		},

		//Function Get Character Countdown
		getCharCountdown: function( initialCount ) {
			var trimmed = target.val();
		    if( trimmed.length <= 0 ){
		    	updateOutput( initialCount );
		    }
		    else {
		    	updateOutput( initialCount - trimmed.length );
		    }
			return ( initialCount - trimmed.length );
		},

		//Function Call Word Count
		callWordCount: function( target, output ) {
			if ( target.length > 0) {
				this.setTarget( target );
				this.setOutput( output );
				this.getWordCount();
			}
		}
	};
};

Tab-able Radio Boxes in Browsers

Most browsers does not allow you to tab through a radio group.  It typically tabs right to the group allowing you to change values using the left and right arrows.  I have developed a little jQuery Class that allows for the radio group to be tabbed through.

To set this up, you would need a hidden element in your HTML.  Here is an example of 3 radio boxes.

<input type="hidden" name="group1" value="" />
<input type="radio" name="group1.1" value="1" tabindex="10" /> Radio 1
<input type="radio" name="group1.2" value="2" tabindex="11" /> Radio 2
<input type="radio" name="group1.3" value="3" tabindex="12" /> Radio 3

An object to the jquery is then defined as:

<script type="text/javascript">
    $(document).ready( function() {
	rt = new RadioTabs();
	rt.init( "group1", ["group1.1", "group1.2", "group1.3"], ["click"] );
    });
</script>

The meat of this is in the jQuery file. This file allows for the hidden value to be defined, and the radio boxes to be tabbed through.

/* Create Tabable Radio Boxes */
function RadioTabs() {
	/* Declare Private Members and Methods */
	var hidden = '';
	var group = [];
	var events = [];

	/* void Bind Events to each individual Radio Box */
	var bindEvents = function () {
		//Loop through Events
		for( var e = 0; e < events.length; e++ ) {
			//Loop through Radio Buttons
			for( var g = 0; g < group.length; g++ ) {
				//Add a Rel value to each group box - to be used in the bind
				$('input:radio[name="' + group[g] + '"]').attr('rel', g);
				//Bind actual events to each radio box
				$('input:radio[name="' + group[g] + '"]').bind(events[e], function( event ) {
					var n = $(this).attr('rel');
					$('[name="' + hidden + '"]').val( $('[name=' + group[n] + ']').val() );
					//Step through radio group and set to false
					for( var i = 0; i < group.length; i++ ) {
						if( group[i] != group[n] ) {
							$('input:radio[name="' + group[i] + '"]:checked').attr( 'checked', false );
						}
					};
				});
			}
		}
	};

	/* Declare Public Members and Methods */
	return {
		/* string Set the Hidden Input Element */
		setHidden	: function ( value ) {
			hidden = value;
		},
		/* array Set the Radio Group Elements */
		setGroup	: function ( values ) {
			group = values;
		},
		/* array Set the Events to bind to */
		setEvents	: function ( values ) {
			events = values;
		},
		/* void Init the script */
		init			: function ( hid, grp, evt ) {
			this.setHidden( hid );
			this.setGroup( grp );
			this.setEvents( evt );
			bindEvents();
		}
	};
};