Ketan Patel    01-May-2013

You may have seen characters counter while sending messages from online free message services or in some cases while filling up online registration forms.In this article you will learn how to create character counter in javascript.

Javascript Code

<script type="text/javascript">
//You can change the counter/limiter value as your wish
var count = "125";  
function limiter() {
	var textvalue = document.demoform.message.value;
	var len = textvalue.length;
	if (len > count) {
		tex = textvalue.substring(0,count);
		document.demoform.message.value =tex;
		return false;
	document.demoform.limit.value = count-len;



	<form name="demoform" method=”post”>
			<td><strong>Characters Counter Demo</strong></td></tr>
			<td colspan="2"><textarea name=message rows=3 cols=40 onkeyup=limiter()></textarea></td>
			<td><label style="margin-left:193px;">Characters left :</label></td>
			<td><input type=text name=limit size=4 readonly value="125"></td>



1. Copy the javascript code and Paste it into the head part of your HTML page.
2. You can easily set the limit or counter as your wish.
3. If you wish to restrict the user not to type more than 200 characters in textarea change the count value as 200. This will set the length or size of textarea.

About Ketan Patel

A Web Developer having 7+ years of experience in web development. Worked with Laravel-Lumen, CakePHP, CodeIgniter, Opencart to make sites for startup companies and small businesses. Apart from blogging, he likes to read Novels, Listening music and Net surfing.