During my search on net i have come up with the plug-in for jquery name word counter, develop by Roshan Bhattara , you can download the demo project from there and also read about the word counter for the text area, i have used that plug-in and that is very nice and good, during my testing i have modifed the code for that plug-in and here is the code for you to so that it will be helpfull for you
jQuery.fn.wordCount = function(params){
var p = { counterElement:"display_count" };
var total_words;
if(params) { jQuery.extend(p, params); }
this.keypress(function()
{
var passedValue = jQuery.trim(this.value);
CountWords(passedValue);
});
function handlePaste()
{
var strInputFieldValue = $(this).val();
var strClipboardText=window.clipboardData.getData("Text");
strInputFieldValue = strInputFieldValue + strClipboardText;
CountWords(strInputFieldValue)
}
function CountWords(strValue)
{
var wordArray = strValue.split(/[\s\.\?\,]+/);
if(wordArray[wordArray.length -1] == '')
total_words=wordArray.length-1;
else
total_words=wordArray.length;
if(strValue.length == 0)
total_words = '0';
jQuery('#'+p.counterElement).html(total_words);
}
$(this).bind('paste',handlePaste);
};
var p = { counterElement:"display_count" };
var total_words;
if(params) { jQuery.extend(p, params); }
this.keypress(function()
{
var passedValue = jQuery.trim(this.value);
CountWords(passedValue);
});
function handlePaste()
{
var strInputFieldValue = $(this).val();
var strClipboardText=window.clipboardData.getData("Text");
strInputFieldValue = strInputFieldValue + strClipboardText;
CountWords(strInputFieldValue)
}
function CountWords(strValue)
{
var wordArray = strValue.split(/[\s\.\?\,]+/);
if(wordArray[wordArray.length -1] == '')
total_words=wordArray.length-1;
else
total_words=wordArray.length;
if(strValue.length == 0)
total_words = '0';
jQuery('#'+p.counterElement).html(total_words);
}
$(this).bind('paste',handlePaste);
};
I have added the paste event which will handle paste event whenever the use paste some text and also the modification of the keypress function . hope this will be help you and again credit goes to Roshan Bhattara for his effort.
And here is the code to call the above plug-in functions
And here is the code to call the above plug-in functions
$(document).ready(function()
{
$('#word_count').wordCount();
});
{
$('#word_count').wordCount();
});
You can download source code from by Clicking here
You can download source code of the word count limit by Clicking here, i have updated the code now it will limit the number of word in the text area.The only problem is that it will create is that it will allow an extra word when limiting. If anyone have suggestion please let me know i will be thankful to him/her :)
8 comments:
this work great.
But every time I paste from notepad or word, then the result is not automatically updated. :(
After I press a space, then the counter will updated.
Do i missed something?
Anonymous: Can you tell me which browser you are using , i mean IE or firefox ?
Hello thank you for nice script.
i would also like to give some limit for word count.
i mean maximum word limit in textarea
is it posible with this script .
Thank you
Vasim: i will work on your request and let you know when i will complete your requested functionality.
Vasim: i have done working on your request you can get the latest version of the code.
asim, the problem anonymous mentioned could be because you have captured the keypress event to calculate the word count.
i see a handlePaste function too, but don't know how it works :(
aj, The handlePaste function will check the length of the input when user just copy from some where and paste it to the input control. This is where handlePaste function come into work.
Hi Asim,
Firstly let me say thanks to you and Roshan for producing this code. I had 2 little problems with your code, as it stands now.
One I did not find the key events positive enough - I find it works better with a key up event binding. For example when I press backspace to remove all words the counter does not register zero until I press backspace a second time.
Two Firefox does not have window.clipboardData and the handlePaste function did not work in that browser, for me.
Hope you don't mind but I made 2 little adjustments that have been tested on ie7/ie8, firefox 3.6 and ie6:
I removed:
this.keypress(function()
{
var passedValue = jQuery.trim(this.value);
CountWords(passedValue);
});
function handlePaste()
{
var strInputFieldValue = $(this).val();
var strClipboardText=window.clipboardData.getData("Text");
strInputFieldValue = strInputFieldValue + strClipboardText;
CountWords(strInputFieldValue)
}
and
$(this).bind('paste',handlePaste);
and replaced them with:
$(this).bind('keyup paste', function(e)
{
var passedValue = jQuery.trim(this.value);
CountWords(passedValue);
});
Hope that is of any use.
Lewis Majendie
Post a Comment