Usage

Use the input id as the jQuery selector for the plugin.

                // default settings using an id '#countable1'
                $('#countable1').jqEasyCounter();
            

If you have multiple inputs on your page you can assign a class to each input. The character counter plugin will create a counter for each input that matched the class selector.

                // default settings using class name '.countable2'
                $('.countable2').jqEasyCounter();
            

Here's an example using an id and custom settings:

                // using id and custom settings
                $('#countable3').jqEasyCounter({
                    'maxChars': 50,
                    'maxCharsWarning': 40,
                    'msgFontSize': '12px',
                    'msgFontColor': '#000',
                    'msgFontFamily': 'Arial',
                    'msgTextAlign': 'left',
                    'msgWarningColor': '#F00',
					'msgAppendMethod': 'insertBefore'				
                });
            

Options

Here are all of jqEasyCharCounter's options and their default values:

                // these can all be overridden in your code
                maxChars: 100,					// max number of characters
                maxCharsWarning: 80,			// max number of characters before warning is shown
                msgFontSize: '12px',			// css font size for counter
                msgFontColor: '#000000',		// css font color for counter
                msgFontFamily: 'Arial',			// css font family for counter
                msgTextAlign: 'right',			// css text-align for counter (left, right, center)
                msgWarningColor: '#FF0000',		// css font color for warning
                msgAppendMethod: 'insertAfter' 	// position of counter relative to the input element(insertAfter, insertBefore)
            

Demo Download

If you find this resource useful, or if you use this code/plugin on your website, consider tossing a buck, or two, my way to help cover costs!