Word Count + Character Limit 2

aarushi2001 · Jan 19, 2006

Hi,

I have a javascript which works as follows:

when user exceeds number of words limit, it alerts the user. However, I would like to display a input box beneath my textarea, which displays number of words left. Also when user exceeds word limit, instead of a alert, I wont to stop user from continuing typing.. how can I do?

LFI · Jan 19, 2006

Words? ...or characters? Your posting title suggests both, but it seems like you're after words.

If it is words, I'm curious as to what the app is for and what the limit is.

Also, if you post what you've got already (that's counting words), it might be easier to make suggestions for what to add.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

aarushi2001 · Jan 19, 2006

The title is cos I wanna combine two scripts.

I have a textarea with 100 words limit. All I want to do is when limit is up, it should not allow user to type.

The script I have is, it prompts/alerts user, which isnt helping me.

LFI · Jan 19, 2006

Your original post implied you have a script that counts the words. Let's see it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

theniteowl · Jan 19, 2006

It makes a big difference in your approach as to whether you mean words or characters. Most times people have a character limit because the data goes into something (like a database) that has a maximum number of characters set.

In typing class back around 1980 they measured words-per-minute by stating every 5 characters equaled a word.
The sentence "Jack jumped over the candlestick." has a total number of words by calculated count of 6 3/5 though it has only 5 literal words.

If you are going by literal words then you have to consider how the words are delimited. Will you count a space as the start of the next word? If they double space it would throw off your count. You could count whenever a space occurs followed by a character as the start of the next word and it would be more accurate but any character proceeded by a space counts as a whole word dramatically shortening the length of what they can type.

If you are going to count the total length of the string they enter then you need to decide if you are going to try to actively track what they have typed giving instant feedback or only after they leave that field. I suspect you want it instantly which means you need to call a function to update the data every time a key is pressed or released.

Just thoughts.

Stamp out, eliminate and abolish redundancy!

LFI · Jan 19, 2006

Something like this might get you started...

(1) replace all instances of more than one space with just a single space.
(2) use spaces as a delimeter to split the textbox value into an array
(3) count the size of the array

Code:

var wordLimit = 500;
function countEm()
{
 var text1 = document.forms['myForm'].elements['myTextBox'].value;
 var text2 = text1.replace(/\s+/g, ' ');
 var text3 = text2.split(' ');
 var numberOfWords = text3.length;

 //write number of words left to another field
 document.forms['myForm'].elements['myTracker'].value = wordLimit - numberOfWords;

 if(numberOfWords > wordLimit)
  alert('too many!');
}

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

BillyRayPreachersSon · Jan 19, 2006

A common drawback to scripts that disable input when a limit (word or character) is reached, is that the delete key can no longer be used to edit the text. Whatever your solution, you should try and avoid this pitfall.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

LFI · Jan 19, 2006

Ooh... I've got a little code that will prevent the user from going beyond the limit without disabling the box. I was just having a little fun with it. 'hope it helps.

Code:

<html>
<head>
<script>
var wordLimit = 10;
var holdText;
var disabledBox = false;

function countEm()
{
 var text1 = document.forms['myForm'].elements['myTextBox'].value;
 var numberOfWords = doCount(text1);

 if(numberOfWords == wordLimit)
 {
  holdText = text1;
 }//end if

 document.forms['myForm'].elements['myTracker'].value = wordLimit - numberOfWords;

 if(numberOfWords >= wordLimit)
  disabledBox = true;
 else
  disabledBox = false;
}//end function

function doCount(textParam)
{
 //replace all instances of one-or-more spaces with a single space
 var text2 = textParam.replace(/\s+/g, ' ');

 //trim leading and tailing spaces
 while(text2.substring(0, 1) == ' ')
  text2 = text2.substring(1);
 while(text2.substring(text2.length-2, text2.length-1) == ' ')
  text2 = text2.substring(0,text2.length-1);

 var text3 = text2.split(' ');

 return text3.length;
}//end function

function maybeReset()
{
 if(disabledBox)
 {
  var currText = document.forms['myForm'].elements['myTextBox'].value;
  var newLength = doCount(currText);

  [red]//prevent user from adding words, but not taking them away[/red]
  if(newLength > wordLimit)
  {
   document.forms['myForm'].elements['myTextBox'].value = holdText;
  }//end if
 }//end if
}//end function
</script>
</head>
<body>
<form name='myForm' >
<textarea name='myTextBox' [red]onkeydown='countEm();' onkeyup='maybeReset();'[/red]></textarea><br />
<input type='text' name='myTracker' />
</form>
</body>
</html>

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

glg1 · Jan 19, 2006

I ran across another means to count words in javascript...

http://home.cogeco.ca/~ve3ll/jstutorc.htm

Although I like Dave's better.

Code:

function CountWords(this_field, show_word_count, show_char_count) {
if (show_word_count===undefined) {show_word_count=true;} //show is default
if (show_char_count===undefined) {show_char_count=false;} //noshow is deft
el=document.getElementById(this_field);
char_count=el.value.length;          // very crude measure
fullStr=el.value+" ";   // add space delimiter to end of text
initial_whitespace_rExp= /^[^A-Za-z0-9]+/gi; //use for complex whitespace
left_trimmedStr=fullStr.replace(initial_whitespace_rExp, " ");
non_alphanumerics_rExp=/[^A-Za-z0-9]+/gi;    // and for delimiters
cleanedStr=left_trimmedStr.replace(non_alphanumerics_rExp, " ");
splitString=cleanedStr.split(" ");word_count=splitString.length -1;
if (fullStr.length <2) {word_count=0;}
if (word_count==1){wordOrWords=" word";}else{wordOrWords=" words";}
if (char_count==1){charOrChars=" character";}else{charOrChars=" characters";}
if (show_word_count && show_char_count) {
   msg="Word Count:\n"+" "+word_count+wordOrWords+"\n";
   msg += " "+char_count+charOrChars;window.alert(msg);
   } else {
   if (show_word_count) {alert("Word Count:  "+word_count+wordOrWords);}
   else {
      if (show_char_count) {
         window.alert("Character Count:  "+char_count+charOrChars);}
      }
   }
return word_count;}

aarushi2001 · Jan 20, 2006

Thanks everybody, u guys r brilliant

.. thank u so much!!

LFI · Jan 20, 2006

Be forewarned, aarushi2001... If a user types somewhere else and then copies/pastes into the textarea in my example, things fall apart a little bit. Not too badly, but some.

Also, you might consider changing the line:

Code:

 if(numberOfWords == wordLimit)
 {
  holdText = text1;
 }//end if

to:

Code:

 if(numberOfWords [!]<=[/!] wordLimit)
 {
  holdText = text1;
 }//end if

...particularly if you're worried about the cutting/pasting thing. It might just be unnecessary processing if you're not.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

tmcneil · Apr 25, 2006

I was wondering if I could get some help on this. I too have a character counter, not a word counter. I have a textarea control where I call the character counter on keystroke. html code:

Code:

<td colspan="1" align="left" valign="top">
            <textarea cols="88" rows="14" id="message" name="message" title="Message Text" STYLE="width: 99%;" OnKeyPress="changeText();"
             onKeyUp="charCount('message','charBann','{CHAR} characters left.');"><%=message%></textarea>
            <br>
            <span class="dlgspan" id="charBann" name="charBann" class="minitext">512 characters left.</span>
            <br>      
        </td>

javascript code:

Code:

function charCount(message,charBann,text)
{
    var messageObj = document.getElementById("message");
    var charBannObj = document.getElementById("charBann");
    var longitude=512 - messageObj.value.length;

    if(longitude <= 0)
    {
        longitude=0;
        text='<span class="disable"> '+text+' </span>';
        messageObj.value=messageObj.value.substr(0,512);
    }
    charBannObj.innerHTML = text.replace("{CHAR}",longitude);
}// end charCount function

It works very well by the way, except when the page refreshes. The textarea box loses focus and the character count goes back to 512. it will update again when you put the cursor in the textarea and strike a key. So, is there a better way to count the characters so that the count is always correct even if there is a page refresh?

Thanks,
Todd

theniteowl · Apr 25, 2006

The problem is that you set a default value of 512 prior to any event being able to happen on the text box.
What you could do is use the onload event to execute the function to update the count so as soon as the page loads it sets the correct value without the field having to receive focus and a keypress first.

Paranoid? ME?? Who wants to know????

tmcneil · Apr 25, 2006

theniteowl,

Should I change the default to be something else...

So, I would replace this event

Code:

onKeyUp="charCount('message','charBann','{CHAR} characters left.');"

with...

I guess I don't quite understand what the syntax would be.

Todd

theniteowl · Apr 25, 2006

What happens is this:
You execute your ASP code which sets the value for what is going into the input field.
Your page get's displayed with the value passed into the input field via your ASP variable message. But the text below it that says "512 characters left." is hard coded into your HTML and so of course does not accurately reflect how many characters are available.

When someone clicks on the input field and hits a key your function executes, counts the characters in the input field and then sets the new number of characters message.

Instead of waiting for someone to click on the input and press a key just modify your <body> tag like this:
<<body onload="charCount('message','charBann','{CHAR} characters left.');">

Then, as soon as the page finishes loading the charCount function runs, counts the actual characters and sets the message without waiting for the client to do anything.

Another approach would be on your ASP code side. Just grab the length of the value stored in the message variable and store it in a variable like msgLength.
Then alter your message section to something like this:
<span class="dlgspan" id="charBann" name="charBann" class="minitext"><%=msgLength%> characters left.</span>
Using this method the correct value is set in the message as the page is displayed.

Paranoid? ME?? Who wants to know????

tmcneil · Apr 25, 2006

Brilliant! I used the body onload event and it worked like a charm. Thanks, niteowl.

Todd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Word Count + Character Limit 2

aarushi2001

Technical User

LFI

Programmer

aarushi2001

Technical User

LFI

Programmer

theniteowl

Programmer

LFI

Programmer

BillyRayPreachersSon

Programmer

LFI

Programmer

glg1

Programmer

aarushi2001

Technical User

LFI

Programmer

tmcneil

Technical User

theniteowl

Programmer

tmcneil

Technical User

theniteowl

Programmer

tmcneil

Technical User

Similar threads

Part and Inventory Search

Sponsor