Twitter Style Remaining Character Count using jQuery

In this tutorial we are going to learn how to calculate the remaining character count using jQuery. By calculating this count we can restrict maximum length of data to be entered by the user. In previous tutorial, we have seen about restricting user from entering more than 1 URL to a input field.

In this example, we are calling a jQuery function on the key-up event of the form input. This function will calculate the remaining character count from the max-length given and the number of characters entered already.

jquery_remaining_character_count

View DemoDownload

HTML Text-Area to calculate Character Length

This HTML code contains text-area and a button to trigger jQuery function to calculate remaining character count.

<textarea id="text-content" cols="80" rows="4" onKeyup="count_remaining_character()"></textarea>
<div id="character-count" align="right">150</div>

jQuery Function Calculating Remaining Character Count

This function calculates number of characters entered by the user. From this number it calculates remaining character count and update it to the user. If the maxlength exceeds then it will mark the negative number in red.

function count_remaining_character() {
    var max_length = 150;
    var character_entered = $('#text-content').val().length;
	var character_remaining = max_length - character_entered;
	$('#character-count').html(character_remaining);
	if(max_length < character_entered) {
	$('#character-count').css('color','#FF0000');
	} else {
	$('#character-count').css('color','#A0A0A0');
	}
}

View DemoDownload

This jQuery code tutorial was published on December 29, 2014.

↑ Back to Top