jQuery character counter

Cliff Boit on September 29, 2011 in JQUERY, Tutorials | 2 comments

• Tweet
• Email

• Tweet
• Email

In today’s tutorial we are going to create a character counter that will display a feedback to the user on the number of remaining characters that they are allowed to enter
In the next post we will turn this jQuery code into a plugin which is pretty much easy and will come with a bunch of customizable options

Tweet

Demo

Download

This will definitely improve user experience and interaction with your website and web applications by displaying feedback as the user types characters into input fields.

The markup

index.html

        	Message
        	
             
		

A simple form with a count id and a span below it that will display feedback to the user on the number of characters remaining for the user to input.

jQuery script

script.js

$(document).ready(function(){	

		var  limit= 100,
			warning= 20,
			text= '';

		$('#count').bind('keypress change',function(){

		   var elem = $(this);

		   var enteredTxt = elem.val().length;

			var display = $('.display_count');

			var remaining = limit - enteredTxt;

			display.html(text+' '+remaining);

		if(remaining > warning){

				text= 'keep on typing'

				display.addClass('ok');
			}
			 else {

				display.removeClass('ok');
			}

		//if char have reached warning level

			if(remaining <= warning && remaining >= 0){

				text= 'warning'

				display.addClass('warning');
			}
			 else {

				display.removeClass('warning');
			}

		//if char have exceeded a limit	

			if(remaining <0){

				text = 'are you blind';

				display.addClass('negative');
			} else {

				display.removeClass('negative');
			}

		 });
});

Technique

Listen for changes and keypress events on the textarea, get the length of the text that has been entered this as you guessed it will be used to calculate the remaining characters to be entered by the user by subtracting it from the limit variable.
A couple of if statements will test the number of characters remaining on each change and keypress event on the textarea and add and remove classes on the span display that will improve the user experience.

Styling

demo.css

/* form styles */	

form{width:500px;}
form label{
	display:block;
	font-size:18px;
	font-weight:900;
	}
form textarea{
	width:490px;
	height:100px;
	padding:5px;
	margin:5px;
	}
form div{position:relative;margin:1em 0;}

/*count display*/
form .display_count{
	position:absolute;
	display:block;
	right:0px;
	font:22px/25px "acens";
	font-weight:bold;
	letter-spacing:2px;

	}
form .ok{color:#fff;}
form .warning{color:#F60;}
form .negative{color:#F00;}	

A basic form styling.

and finally

Hope you find this code useful.
Remember to stay tuned for the next post on changing this code into a jQuery plugin.

Grab the RSS feeds and always be the first to know.