www.webdeveloper.com
Results 1 to 2 of 2

Thread: Word Counter/Limiter/Alert

  1. #1
    Join Date
    Jul 2008
    Posts
    93

    Word Counter/Limiter/Alert

    Hello All,

    Can anyone show me to to set up a word counter/limiter?

    This is my current code which I found from an old thread a while back. Can someone help me modify it to achieve the following:

    1 - Count the number of words remaining
    2 - Alert the user if they have gone over 250 words
    3 - If a user does copy and paste of 400 words, word 251 - 400 will be autmatically deleted.

    PHP Code:
    <script>
    var 
    wordLimit 250;
    var 
    holdText;
    var 
    disabledBox false;

    function 
    countEm()
    {
     var 
    text1 document.forms['myForm'].elements['Comments'].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(01) == ' ')
      
    text2 text2.substring(1);
     while(
    text2.substring(text2.length-2text2.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['Comments'].value;
      var 
    newLength doCount(currText);

      
    //prevent user from adding words, but not taking them away
      
    if(newLength wordLimit)
      {
       
    document.forms['myForm'].elements['Comments'].value holdText;
       
    alert("You have reached 250 words.");
      }
    //end if
     
    }//end if
    }//end function
    </script> 
    PHP Code:
    <td colspan="2"Words remaining:
                      <
    input type="box" readonly name="myTracker" size="4" value="250">
                      <
    br>
                      <
    textarea name="Comments" id="Comments" onkeydown="countEm();" onkeyup="maybeReset();" cols="60" rows="10"></textarea></td
    Thanks in advance.

  2. #2
    Join Date
    May 2011
    Posts
    25
    if you include prototype js, you can do something like:

    PHP Code:
    <textarea name="Comments" id="Comments" maxlength="250" cols="60" rows="10"></textarea>

    <
    script type="text/javascript">
    // <![CDATA[

        
    var my_textlimiter = function(event_)
        {
            
    el event_.element();
            
            if (
    el.value.length el.readAttribute('maxlength')) 
            {
                
    alert("You have reached "el.readAttribute('maxlength') +" words."); 
            }

            
    el.value el.value.substr(0el.readAttribute('maxlength'));
        }
        
        $$(
    'textarea[maxlength]').invoke('keyup'my_textlimiter);
        $$(
    'textarea[maxlength]').invoke('paste'my_textlimiter);
        $$(
    'textarea[maxlength]').invoke('blur',  my_textlimiter);

    // ]]>
    </script> 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles