This allows you to have a maximum limit on your text area and restricts the user if reached the max limit. (Try the demo)
1. TextCounterExample.html page
This is a simple HTML page which has a textarea input field and a span which keeps showing the number of characters left as you are typing.
Download code here or copy this code and save this in a file as TextCounterExample.html extension.
<html> <header> <script src="jquery.js" type="text/javascript"></script> <script src="textcounter.js" type="text/javascript"></script> </header> <body> <textarea class="word_count" rows="5" cols="40"></textarea> <br/> <span class="counter"></span> </body> </html>
2. Javascript textcounter.js
I always prefer to keep JavaScript separate from html code, therefore I have created a textcounter.js file. This JavaScript uses jQuery for doing the magic.
Download code here or copy this code and save the file as textcounter.js in the same directory where you have html file.
$(document).ready(function(){
/**
* Character Counter for inputs and text areas showing characters left.
*/
$('.word_count').each(function(){
//maximum limit of characters allowed.
var maxlimit = 240;
// get current number of characters
var length = $(this).val().length;
if(length >= maxlimit) {
$(this).val($(this).val().substring(0, maxlimit));
length = maxlimit;
}
// update count on page load
$(this).parent().find('.counter').html( (maxlimit - length) + ' characters left');
// bind on key up event
$(this).keyup(function(){
// get new length of characters
var new_length = $(this).val().length;
if(new_length >= maxlimit) {
$(this).val($(this).val().substring(0, maxlimit));
//update the new length
new_length = maxlimit;
}
// update count
$(this).parent().find('.counter').html( (maxlimit - new_length) + ' characters left');
});
});
});
3. Need jQuery for this to work
Download the jQuery file used in this example from Download.
Or download latest version of jQuery from http://jquery.com and save it as jquery.js file in same directory where you have html file.
Now open the TextCounterExample.html page in a browser and the counter should be updating as you type.
4. Try the live demo of same code below.
Type in some character in the text area and see the character counter being updated as you type. The maximum allowed characters are 240 in this demo, and can be easily configured.
5. Updating the maximum limit
The demo version max limit value is set to 240 characters you can change this limit easily.
For updating the maximum limit you can edit the line:7 in textcounter.js file.
//maximum limit of characters allowed. var maxlimit = 240;
This code is enhanced version of word_counter I found(from google search) on this link jQuery word character counter
Yes.It's working.My problem is solved by simply coping endorsed dir in apache tomcat home dir.Thanks.
ReplyDeletethis is a character counter not a word counter.
ReplyDeletemay be
Delete