[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to apply a maxlength for a TEXTAREA field (that will work in IE, Firefox, etc. ... all current browsers and OS)

Posted on 2006-03-22
38
Medium Priority
?
698 Views
Last Modified: 2012-05-05
I currently am using a development tool to create a survey.  I don't have the ability to modify the actual code on the page, other than add a STYLESHEET .. and possibly call in another page using CSS.

The page I am working on can be seen at:
http://web.njcu.edu/surveys_ac/Surveys/TakeSurvey.aspx?surveyid=1003

I implemented the use of thw following:

In the stylesheet, I added:
TEXTAREA { behavior: url(maxlength_2000.htc);}

===============

In the external page of maxlength_2000.htc, I included the code:

<PUBLIC:COMPONENT id="bhvMaxlength" urn="maf:Maxlength">
      <PUBLIC:PROPERTY name="maxLength" />
      <PUBLIC:ATTACH event="onkeypress" handler="doKeypress" />
      <PUBLIC:ATTACH event="onbeforepaste" handler="doBeforePaste" />
      <PUBLIC:ATTACH event="onpaste" handler="doPaste" />

<SCRIPT language="JScript">
// Keep user from entering more than maxLength characters
function doKeypress(){
      if(!isNaN(maxLength)){
            maxLength = parseInt(2000);
            var oTR = element.document.selection.createRange();
            // Allow user to type character if at least one character is selected
            if(oTR.text.length >= 1)
                  event.returnValue = true;
            else if(value.length > maxLength-1)
                  event.returnValue = false;
      }
}
// Cancel default behavior
function doBeforePaste(){
      if(!isNaN(maxLength))
            event.returnValue = false;
}
// Cancel default behavior and create a new paste routine
function doPaste(){
      if(!isNaN(maxLength)){
            event.returnValue = false;
            maxLength = parseInt(2000);
            var oTR = element.document.selection.createRange();
            var iInsertLength = maxLength - value.length + oTR.text.length;
            var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
            oTR.text = sData;
      }
}
</SCRIPT>

</PUBLIC:COMPONENT>

So ... in Internet Explorer (for Windows OS), this works fine and limits the number of characters that can be entered into any of the TEXTAREA fields, to 2000.  (NOTE:  Since I can't add a maxlength="2000" to each of the individual TEXTAREA fields on the form, I needed to set this in the .htc file.

This is all fine.  There seems to be no problem here.

But, .. the problem and help I need is that if you test the survey in Firefox, and other browsers, the maxlength feature does not always work.  It doesn't work in Firefox.

I need to know if someone can help me by modifying the .htc page .. so that I can limit the number of characters that can be entered into any TEXTAREA field (on the page) to 2000 (so it will work in ALL MAJOR BROWSERS in both Windows OS as well as MAC.

If I need to change the imported file from .htc to  .js, that's fine.  I just need help with this .. asap.

Thanks
Gary

0
Comment
Question by:Gary Gordon
  • 18
  • 11
  • 7
  • +1
38 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16261304
You can have event listener, to do counting of the characters. This is cross-browser solution.

Look at Following code, does word and character count.


<html>
<head>
<title>TextArea Word Limit</title>
</head>

<body>
<script language="javascript">
function WordCount(fld, limit) {
      var words = fld.value.split (/[\s{1,}]/);
      document.getElementById('wordcnt').innerHTML = 'Count of words ' + words.length +
                                                     ' Character count ' + (fld.value.length);
      if (parseInt(fld.value.length) >= parseInt(limit)) { alert ('Limit Reached'); }
}
</script>
<textarea onKeyUp="WordCount(this,2000)" rows="10" cols="50">
</textarea>
<br/>
Limit is 2000 characters:
<span id="wordcnt">Word Count is displayed here.</span>
</body>
</html>
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16261539
behaviours are (to my knowledge) microsoft only.

Hence, you cannot limit the textarea's maxlength using css in a crossbrowser fashion.

-r-
0
 

Author Comment

by:Gary Gordon
ID: 16261720
pravinasar,

I tested this .. and it works (in a regular web page) .. but .. it doesn't LIMIT the number of characters that can be entered.  It "does" tell you LIMIT REACHED .. but .. you can still type one character at a time after that.  Each time you type another character, it tells you LIMIT REACHED, but .. it doesn't prevent a user from adding more characters.  Can this be modified???

If so, .. I'll then give you my next question on how to get it to work, based on the situation I am in.  :-)

Thanks,
Gary


RE:   Roonaan, .. when you said behaviours are microsoft only .. does this mean that (in your opinion) the code from pravinasar will only work in IE?  Or can you explain more about what a behaviour is .. vs .. what pravinasar is providing?

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 49

Expert Comment

by:Roonaan
ID: 16261755
No, I ment .htc files are are microsoft only.

I didn't look at pravinasars code realy closely, because you mentioned:
>>I don't have the ability to modify the actual code on the page, other than add a STYLESHEET

Which in my interpretation ment that providing javascript wasn't going to help you, as you weren't allowed to add that kind of code.

-r-
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16262807
hi gary,
Try this.  Simple but works

function check(obj) {
       if (obj.value.length > 255) {
              alert("Sorry but this field wil not hold anymore information.\nThe limit in this box is 255 characters and spaces.\n\nThank you\n---Customer Service")
              obj.value = obj.value.substring(0,255)
              return false
             }
             return true
      }

/////function call/////

onkeypress="check(this.form.*FIELD*);"

this works good for my purposes.  Hope this is helpful

Lucas
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16262842
This modification will limit text to desired limit,

You can override the textarea onkeypress function. Look the the code at the end of this post.


<html>
<head>
<title>TextArea Word Limit</title>
</head>

<body>
<script language="javascript">
function WordCount(fld, limit) {
      var words = fld.value.split (/[\s{1,}]/);
      document.getElementById('wordcnt').innerHTML = 'Count of words ' + words.length +
                                                     ' Character count ' + (fld.value.length);
      if (parseInt(fld.value.length) >= parseInt(limit))
      {
            fld.value = fld.value.substring (0, limit-1);
      }
}
</script>
<textarea id="text1" rows="10" cols="50">
</textarea>
<br/>
Limit characters:
<span id="wordcnt">Word Count and Character Count is displayed here.</span>
<br>
<textarea id="text2" rows="10" cols="50">
</textarea>
<br>

<script language="javascript">
var txtObj = document.getElementById ('text1');
var limit  = 20;
txtObj.onkeypress = function () { WordCount(txtObj, limit); }
var txtObj = document.getElementById ('text2');
limit  = 30;
txtObj.onkeypress = function () { WordCount(txtObj, limit); }
</script>

</body>
</html>
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16262848
hi gary (again),
Just tried in FireFox Mozilla and works.  Note 255 can be changed to any number.  255 was choice to avoid losing data in movement to Access Database.

gl,
Lucas
0
 

Author Comment

by:Gary Gordon
ID: 16268895
pravinasar,

1.  The first text box doesn't appear to work by restricting the number of characters entered.  The second text box works, but not the first.  Can you fix this?


Now ... quesion:

Can I place all of the javascript code into one .js file and pull the file in .. through the HEAD, not the body?

Sample .JS File:

/* START: Javascript File */

function WordCount(fld, limit) {
     var words = fld.value.split (/[\s{1,}]/);
     document.getElementById('wordcnt').innerHTML = 'Count of words ' + words.length +
                                                    ' Character count ' + (fld.value.length);
     if (parseInt(fld.value.length) >= parseInt(limit))
     {
          fld.value = fld.value.substring (0, limit-1);
     }
}


var txtObj = document.getElementById ('text1');
var limit  = 20;
txtObj.onkeypress = function () { WordCount(txtObj, limit); }
var txtObj = document.getElementById ('text2');
limit  = 30;
txtObj.onkeypress = function () { WordCount(txtObj, limit); }

/* END: Javascript File */


NOTE:  The only thing I can do is place code into the head of the document.  I can't add anything or modify anything in the body.  

So, please let me know if I create a .js file, and include all of the javascript code you gave me (once you fix the first box .. and simply show me how to modify the code in the event I have only one textarea box or even 10 textarea boxes) .. will this work?  Or .. does the Javascript code need to be in the body to work (in this case)?  Please explain.

Thanks,
Gary



0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16268986
hi gary,

>NOTE:  The only thing I can do is place code into the head of the document.  I can't add anything or modify anything in the body.  

I am very curious at this point.  Maybe this is off subject but can you explain why you can't add anything to the body?  It seems no matter how many times you identify .js files, you still need to call within the body which would require MODIFYING the body.  Right?!  Or am I just unaware of this type of situation.  

Thanks!

Lucas
0
 

Author Comment

by:Gary Gordon
ID: 16270343
Lucas,

I am using an application that creates the form automatically.  I just tell the application what fields to put into the form.  Then, the form is generated on the fly, .. dynamically.  I can insert code into the "base" of the document .. as in the HEAD, but I can't modify the actual code on the page that is dynamically created.

So, I need to be able to insert some javascript (using an external page) or some .css (using an external css page) that would control the item.

The good thing is .. that each field does have an ID that is set and associated with it.  (I can't change or modify this information in any way), but .. I can use the ID that is dynamically generated so .. in the script provided by "pravinasar" .. I can put the ID for each of the textarea fields into his javascript.  

I am hoping this will work.

I hope that answers your question.  :-)

So .. I just need to know how to add this functionality without actually adding code to the textarea tags, or within the actual body of the page (other than an external Javascript or Stylesheet page).

Gary
0
 

Author Comment

by:Gary Gordon
ID: 16276686
pravinasar,

Can you tell me what I need to do to get this to work based on my comment above??

Thanks,
Gary
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16280338
Since you mentioned you have many textarea field on a page, I suggested this solution,

This one assigns a event handler function when a key is pressed.
Instead of editing the html code for each textarea, after a page is loaded, I get the textarea
object by inquiry method  document.getElementById ('text1'); and define/assign a onkeypress
event handler function.
 

<textarea id="text1" onKeyUp="WordCount(this,20)" rows="10" cols="50">
</textarea>

<script language="javascript">
var txtObj = document.getElementById ('text1');
var limit  = 20;
txtObj.onkeypress = function () { WordCount(txtObj, limit);  }
</script>

What you need to do ?

1. Assign id to each textarea *if not assigned*
   I saw you page source , textarea field object has id such as "_1090__textbox"

2. My function permits you to set character count limit for each textarea. You said you
   want limit to be 2000 for each of them.
 
3. Assign the function.

4. Considering you posted limit as an example, I have a function which does help you
    do the job of onkeypress assignments.

function AssignTextAreaLimits () {

     var txtAreaIds = new Array ();
     var tx=0;
     var limit = 2000;
     txtAreaIds[tx++] = '"_1090__textbox";
     txtAreaIds[tx++] = '"_1091__textbox";
     txtAreaIds[tx++] = '"_1092__textbox";
     txtAreaIds[tx++] = '"_1093__textbox";
     txtAreaIds[tx++] = '"_1094__textbox";
     txtAreaIds[tx++] = '"_1095__textbox";
     for (tx=0; tx < textAreaIds.length; tx++) {
         var txtObj = document.getElementById ('text1');
         txtObj.onkeypress = function () { WordCount(txtObj, limit);  }
    }
}


5. The following code can go at the tail end of the page,

    <body>


    <!--- You page code goes here --->

    <script language="javascript">AssignTextAreaLimits (); </script>
    </body>
    </html>
   

or you can do automatic execution of the function  as soon as page loading is completed.
    this calls a event handler onload for a page

   <body onload="AssignTextAreaLimits ();">

    <!--- You page code goes here --->

    </body>
    </html>

0
 

Author Comment

by:Gary Gordon
ID: 16304806
pravinasar,

Hi.

I tested this, but it doesn't seem to be working.

One question I have is ..

function AssignTextAreaLimits () {

     var txtAreaIds = new Array ();
     var tx=0;
     var limit = 2000;
     txtAreaIds[tx++] = '"_1090__textbox";
     txtAreaIds[tx++] = '"_1091__textbox";
     txtAreaIds[tx++] = '"_1092__textbox";
     txtAreaIds[tx++] = '"_1093__textbox";
     txtAreaIds[tx++] = '"_1094__textbox";
     txtAreaIds[tx++] = '"_1095__textbox";
     for (tx=0; tx < textAreaIds.length; tx++) {
         var txtObj = document.getElementById ('text1');
         txtObj.onkeypress = function () { WordCount(txtObj, limit);  }
    }
}


I see:     ('text1')  in the line that starts with  var txtObj = ... ('text1');

I was confused by this since   text1 isn't used on this page.  Is this a problem?

LINK:  http://web.njcu.edu/surveys_ac/Surveys/TakeSurvey.aspx?surveyid=1003

Please explain and let me know what might be causing it not to work.

Thanks,
Gary
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16304954
Sorry about the typo with array creation. (extra ' at the start )


     txtAreaIds[tx++] = "_1090__textbox";
     txtAreaIds[tx++] = "_1091__textbox";
     txtAreaIds[tx++] = "_1092__textbox";
     txtAreaIds[tx++] = "_1093__textbox";
     txtAreaIds[tx++] = "_1094__textbox";
     txtAreaIds[tx++] = "_1095__textbox";
0
 

Author Comment

by:Gary Gordon
ID: 16305206
Oh.  :-)

But also, if you would explain .. I am confused about:

var txtObj = document.getElementById ('text1');

How is   text1   working when I don't see anything named   text1.  Or could this be anything.  hahaha  Please let me know.

Gary



0
 

Author Comment

by:Gary Gordon
ID: 16305344
pravinasar,

I removed the single quotes, but it still doesn't work.

:(
Gary
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16305412
gary,

I believe 'text1' is the id given to the textareas when the form is generated and was used as example.

From the above code:

Comment from pravinasar
Date: 03/22/2006 05:18PM EST
---------
<textarea id="text1" rows="10" cols="50"></textarea>
<br/>
Limit characters:
<span id="wordcnt">Word Count and Character Count is displayed here.</span>
<br>
<textarea id="text2" rows="10" cols="50"></textarea>
---------

best regards,
Lucas  

PS - I am following this closely.  I have never tried this type of implementation. very curious  >:-)
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16306172
Please make sure you have the ids for the textarea as scripted below.
If not
       Modify the script ..

Take this modified script, which send a popup alert, when textarea with a particular id is not found in the document page.
Hope this helps you debug your  page..



function AssignTextAreaLimits () {

     var txtAreaIds = new Array ();
     var tx=0;
     var limit = 2000;
     txtAreaIds[tx++] = "_1090__textbox";
     txtAreaIds[tx++] = "_1091__textbox";
     txtAreaIds[tx++] = "_1092__textbox";
     txtAreaIds[tx++] = "_1093__textbox";
     txtAreaIds[tx++] = "_1094__textbox";
     txtAreaIds[tx++] = "_1095__textbox";
     for (tx=0; tx < textAreaIds.length; tx++) {
         var txtObj = document.getElementById (txtAreaIds[tx]);
         if (!txtObj) {
                  alert ('TextArea with id=' + txtAreaIds[tx] + ' not found');
                  continue;
         }
         txtObj.onkeypress = function () { WordCount(txtObj, limit);  }
    }
}
0
 

Author Comment

by:Gary Gordon
ID: 16307497
pravinasar,

Well ..

1.  I am appreciative of your help.  :-)  If we have to keep trying, that's fine.
2.  I tested your above modification and still nothing happens.  Maybe it's not calling the function.  ?????

What now?
Gary
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16310418
Take this one..
function AssignTextAreaLimits () {

     var txtAreaIds = new Array ();
     var tx=0;
     var limit = 2000;
     txtAreaIds[tx++] = '"_1090__textbox";
     txtAreaIds[tx++] = '"_1091__textbox";
     txtAreaIds[tx++] = '"_1092__textbox";
     txtAreaIds[tx++] = '"_1093__textbox";
     txtAreaIds[tx++] = '"_1094__textbox";
     txtAreaIds[tx++] = '"_1095__textbox";
     for (tx=0; tx < txtAreaIds.length; tx++) {
         var txtObj = document.getElementById ('text1');
         txtObj.onkeypress = function () { WordCount(txtObj, limit);  }
    }
}
0
 

Author Comment

by:Gary Gordon
ID: 16310657
Pravinasar,

Still not working.

(Even after I removed the single quotes again ... hahaha .. it still didn't work.)

But also .. why are we using   WordCount.   I am needing to count characters .. not words?  But I did try it with 2000 words, and that didn't work either.

Maybe I am missing something.

Please look it over and tell me EXACTLY what should be included in the .js file that I am including in the head of the page.  And .. what needs to be at the end of the page, just before the closing BODY tag.  I want to make sure that my .js file, etc., etc. is complete.

Gary
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16312179
Take this entire code, and test it to your satisfaction, before attempting to integrate with page.


<html>
<head>
<title>Text Area Limit</title>
</head>

<body>
<script language="javascript">
function BrowserType () {
      var srchText = navigator.userAgent;
      var brwTypes = ("Opera,MSIE,Netscape,Firefox").split(',');
      for (var ix=0; ix < brwTypes.length; ix++) {
            if (srchText.toString().match(brwTypes[ix])) {
                  return brwTypes[ix];
            }
      }
      return null;
}
var brwType = BrowserType();

function ShowCount (id, charCnt, color) {
      var divObj = document.getElementById('Span'+id);
      if (divObj) {
            divObj.style.color=color;
             divObj.innerHTML= ' Character count ' +charCnt;
       }
}
function WordCount(fld, limit) {
     // Limit on words
     //var words = fld.value.split (/[\s{1,}]/);
      
     if (parseInt(fld.value.length) >= parseInt(limit))
     {
          fld.value = fld.value.substring (0, limit-1);
              ShowCount (fld.id, fld.value.length, '#FF0000');
     }
       else {
       ShowCount (fld.id, fld.value.length, '#000000');
       }
}

function keyHandler(e) {
      if (!e) {
            e = window.event;
      }
      var txtObj = null;

      if (brwType == 'Firefox' || brwType == 'Netscape') {
            txtObj = e.target;
      }
      else {
            txtObj = e.srcElement;
      }

      if (txtObj) {
            WordCount(txtObj, 20);
      }
}

function AssignTextAreaLimits () {
     var txtAreaIds = new Array();
     var tx=0;
     var limit = 2000;
     txtAreaIds[tx++] = "_1090__textbox";
     txtAreaIds[tx++] = "_1091__textbox";
     txtAreaIds[tx++] = "_1092__textbox";
     txtAreaIds[tx++] = "_1093__textbox";
     txtAreaIds[tx++] = "_1094__textbox";
     txtAreaIds[tx++] = "_1095__textbox";
     for (tx=0; tx < txtAreaIds.length; tx++) {
         var txtObj = document.getElementById (txtAreaIds[tx]);            
         if (!txtObj) {
                  alert ('TextArea with id=' + txtAreaIds[tx].id + ' not found');
                  continue;
         }
             if (txtObj) {
                  txtObj.onkeypress = keyHandler;
             }
    }
}
</script>

<form name="Test">
<table>
<tr>
<td>
<br>
<span id="Span_1090__textbox">Text_1090__textbox</span>
<br>
<textarea name="_1090:_textbox" rows="8" cols="90" id="_1090__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1091__textbox">Text_1091__textbox</span>
<br>
<textarea name="_1091:_textbox" rows="8" cols="90" id="_1091__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1092__textbox">Text_1092__textbox</span>
<br>
<textarea name="_1092:_textbox" rows="8" cols="90" id="_1092__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1093__textbox">Text_1093__textbox</span>
<br>
<textarea name="_1093:_textbox" rows="8" cols="90" id="_1093__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1094__textbox">Text_1094__textbox</span>
<br>
<textarea name="_1094:_textbox" rows="8" cols="90" id="_1094__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1095__textbox">Text_1095__textbox</span>
<br>
<textarea name="_1095:_textbox" rows="8" cols="90" id="_1095__textbox"></textarea>
</td>
</tr>
</table>
</form>
<script language="javascript">
AssignTextAreaLimits();
</script>
</body>
</html>
0
 

Author Comment

by:Gary Gordon
ID: 16314021
Pravinasar,

Well..

1.  We are much closer now.
2.  It worked (but with a few issues .. but again the good news is .. it sort of worked.)
3.  Here's a list of what it did and didn't do.

It did:
>  Limited each of the text boxes to 20 characters ... not 2000.
> I tested it in FireFox and it worked there as well.  :-)

It didn't"
> Limit the "words" to 20 (as it looks like it should have), AND .. limit the characters to 2000.
> In your demo, the first character was showing up as  "0" instead of 1 .. when it displayed above the textarea box. It was counting the first character as 1, but it displayed the first character (in the text that appears above the box) as 0.  So, when you type in 10 characters, it would only "say" you had 9, even though you actually typed in 10 characters.

I hope this helps.

Can you fix the rest of this remaining stuff??  :-)

Thanks,
Gary

PS:  If possible .. a very important part would be for "each Textarea box" to be able to have a different limit that could be set for characters and/or words.  Currently it is set for the same limit on each one.  If possible, it would be better if each box could have it's own  independently controlled limit.  So, box one might have a limit of 2000 characters and/or 20 words, but then box two might have a limit of 1500 characters and/or 18 words, etc., etc.  Can this be done?


0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16314522
> Limit the "words" to 20 (as it looks like it should have), AND .. limit the characters to 2000.

I said this was a test. Do you expect me to test till 2000 characters. That is minor issue.

You said you want to limit to length (problem description, ) and not the word limit.
Hence I took it out.

Code is documented, you can change to suit your requirements.

> In your demo, the first character was showing up as  "0" instead of 1 .. when it displayed above the textarea box. It was counting the first character as 1, but it displayed the first character (in the text that appears above the box) as 0.  So, when you type in 10 characters, it would only "say" you had 9, even though you actually typed in 10 characters.

It event tracking start as soon as key is pressed. Initially it is empty hence zero.
Only after 10 characters are done, it will say 10,

Instead of onkeypress tracking , then do onkeyup tracking

if (txtObj) {
               txtObj.onkeyup = keyHandler;
           }

PS:  If possible .. a very important part would be for "each Textarea box" to be able to have a different limit that could be set for characters and/or words.  Currently it is set for the same limit on each one.  If possible, it would be better if each box could have it's own  independently controlled limit.  So, box one might have a limit of 2000 characters and/or 20 words, but then box two might have a limit of 1500 characters and/or 18 words, etc., etc.  Can this be done?

Manage a array of limit for each text object and pass it..

By the way ?

Is this your one of the class assignment ??



0
 

Author Comment

by:Gary Gordon
ID: 16314758
Pravinasar,

:-)  haha   No .. this isn't a class assignment.  

I sincerely appreciate all of your help.

If you would be so kind as to do the following for me .. I would like to DOUBLE the points I had originally assigned for your effort and also because this turned out to be quite a bit more involved (on your end) then I anticipated it would be.  :-))

So, please ...

RE-WRITE the code .. as you just did previously .. so it will ...

1.  Allow me to set the limit for Characters and/or Words - FOR EACH TEXTAREA BOX INDEPENDENTLY.  (and just note in the code what I need to do in order to temporarily remove the Characters and/or Words from being limited.  This way I can have it in the code, and use either / or .. as needed.

2.  Set the text that appears above each TEXTAREA box .. to display the count of Characters and Words .. so it would show both and ... so it will show the first Character entered as   "1"   instead of  "0".

I think that is it.  Aside from that .. it all seemed to work great.  I really thank you!!

Gary

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16315206
>> But also .. why are we using   WordCount.   I am needing to count characters .. not words?  

Lot of back and forth of problem definition ...

Sorry I really do not know to help.. (:
0
 

Author Comment

by:Gary Gordon
ID: 16315421
Pravinasar,

Can you at least ...

RE-WRITE the code .. as you just did previously .. so it will ...

Allow me to set the limit for Characters - FOR EACH TEXTAREA BOX INDEPENDENTLY.

Can you do that for me?  (If worrying about the Word Count is too much to deal with, then let's just worry about the Characters.)  

Thanks,
Gary

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16316002

<html>
<head>
<title>Text Area Limit</title>
</head>

<body>
<script language="javascript">
function BrowserType () {
      var srchText = navigator.userAgent;
      var brwTypes = ("Opera,MSIE,Netscape,Firefox").split(',');
      for (var ix=0; ix < brwTypes.length; ix++) {
            if (srchText.toString().match(brwTypes[ix])) {
                  return brwTypes[ix];
            }
      }
      return null;
}
var brwType = BrowserType();
var tx=0;
var txtAreaIds = new Array();
var txtWordLimits = new Array();
var txtCharLimits = new Array();
function InitializeArrays() {
      tx=0;
      txtAreaIds[tx++] = "_1090__textbox";
      txtAreaIds[tx++] = "_1091__textbox";
      txtAreaIds[tx++] = "_1092__textbox";
      txtAreaIds[tx++] = "_1093__textbox";
      txtAreaIds[tx++] = "_1094__textbox";
      txtAreaIds[tx++] = "_1095__textbox";
      
      tx=0;
      txtWordLimits[tx++] = 10;
      txtWordLimits[tx++] = 10;
      txtWordLimits[tx++] = 10;
      txtWordLimits[tx++] = 10;
      txtWordLimits[tx++] = 10;
      txtWordLimits[tx++] = 10;

      tx=0;
      txtCharLimits[tx++] = 200;
      txtCharLimits[tx++] = 200;
      txtCharLimits[tx++] = 200;
      txtCharLimits[tx++] = 200;
      txtCharLimits[tx++] = 200;
      txtCharLimits[tx++] = 200;
}

function getWordLimit (textAreaId) {
      for (tx=0; tx < txtAreaIds.length; tx++) {
            if (textAreaId == txtAreaIds[tx]) {
                  return (txtWordLimits[tx]);
            }
      }
      alert ('Error in getWordLimit');
      return (200);
}

function getCharLimit (textAreaId) {
      for (tx=0; tx < txtAreaIds.length; tx++) {
            if (textAreaId == txtAreaIds[tx]) {
                  return (txtCharLimits[tx]);
            }
      }
      alert ('Error in getCharLimit');
      return (2000);
}

function ShowCount (id, wordCnt, charCnt, color) {
      var divObj = document.getElementById('Span'+id);
      if (divObj) {
            divObj.style.color=color;
             divObj.innerHTML= 'Word Count ' + wordCnt +  ' Character count ' +charCnt;
       }
}

function WordCount(fld, wordlimit, charlimit) {
     // Limit on words
       var str2 = fld.value.replace(/^(\s{1,})|(\s{1,})$|(\s{2,})/g, '');
     var words = str2.split (/[\s{1,}]/);
      
     if (parseInt(words.length) >= parseInt (wordlimit) ||
           parseInt(fld.value.length) >= parseInt(charlimit))
     {
              ShowCount (fld.id, words.length, fld.value.length, '#FF0000');
              if (      parseInt(words.length) >= parseInt (wordlimit)) {
                    str2 = words[0];
                    for (var ix=1; ix < (words.length-1); ix++) {
                        str2 += ' ' + words[ix];
                  }
                  fld.value = str2;
              }
              else {
          fld.value = fld.value.substring (0, charlimit-1);
              }
     }
       else {
       ShowCount (fld.id, words.length, fld.value.length, '#000000');
       }
}

function keyHandler(e) {
      if (!e) {
            e = window.event;
      }
      var txtObj = null;

      if (brwType == 'Firefox' || brwType == 'Netscape') {
            txtObj = e.target;
      }
      else {
            txtObj = e.srcElement;
      }

      if (txtObj) {
            var wCnt = getWordLimit(txtObj.id);
            var cCnt = getCharLimit(txtObj.id);
            WordCount(txtObj, wCnt, cCnt);
      }
}

function AssignTextAreaLimits () {
       InitializeArrays();
     for (tx=0; tx < txtAreaIds.length; tx++) {
         var txtObj = document.getElementById (txtAreaIds[tx]);            
         if (!txtObj) {
                  alert ('TextArea with id=' + txtAreaIds[tx].id + ' not found');
                  continue;
         }
             if (txtObj) {
                  txtObj.onkeyup = keyHandler;
             }
    }
}
</script>

<form name="Test">
<table>
<tr>
<td>
<br>
<span id="Span_1090__textbox">Text_1090__textbox</span>
<br>
<textarea name="_1090:_textbox" rows="8" cols="90" id="_1090__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1091__textbox">Text_1091__textbox</span>
<br>
<textarea name="_1091:_textbox" rows="8" cols="90" id="_1091__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1092__textbox">Text_1092__textbox</span>
<br>
<textarea name="_1092:_textbox" rows="8" cols="90" id="_1092__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1093__textbox">Text_1093__textbox</span>
<br>
<textarea name="_1093:_textbox" rows="8" cols="90" id="_1093__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1094__textbox">Text_1094__textbox</span>
<br>
<textarea name="_1094:_textbox" rows="8" cols="90" id="_1094__textbox"></textarea>
</td>
</tr>
<tr>
<td>
<br>
<span id="Span_1095__textbox">Text_1095__textbox</span>
<br>
<textarea name="_1095:_textbox" rows="8" cols="90" id="_1095__textbox"></textarea>
</td>
</tr>
</table>
</form>
<script language="javascript">
AssignTextAreaLimits();
</script>
</body>
</html>
0
 

Author Comment

by:Gary Gordon
ID: 16317706
pravinisar,

I tested this new script and .. it reacted very weird.

Please try it your self at  http://web.njcu.edu/surveys_ac/Surveys/TakeSurvey.aspx?surveyid=1003

You will see weird things happen.  :-)

See if you can figure out what needs to be fixed.

Thanks,
Gary

PS: If we need to forget the "word count" .. if that's causing the problem .. that's okay.  :-)  The limit on the number of characters is the main concern that I have.  The word count was just something I thought might also be good. So, see what you can do.  THANKS!!


0
 

Author Comment

by:Gary Gordon
ID: 16327412
pravinisar,

I haven't heard back from you.

Gary
0
 

Author Comment

by:Gary Gordon
ID: 16327783
pravinisar,

I was just curious if you were still helping and trying to figure out the problem.

:-)
Gary
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16332306
Hi Pravinisar and Gary,

Just messing around with this.  Gary, can you replace this function with the one below and try?

function getCharLimit(textAreaId) {
       if (textAreaId.value.length > 2000) {
              alert("Sorry but this field wil not hold anymore information.\nThe limit in this box is 2000 characters and spaces.\n\n--Thank you")
              textAreaId.value = textAreaId.value.substring(0,2000)
              return false
             }
             return true
      }

OR


function getCharLimit (textAreaId) {
     for (tx=0; tx < txtAreaIds.length; tx++) {
          if (textAreaId == txtAreaIds[tx]) {
               return (txtCharLimits[tx]);
          }
     }
     alert ('Error in getCharLimit');
     return (2000);
}

I did see the wierd functionality of your form.  Crazy stuff in those textareas!  I am no expert but I would like to see how this change affects your form.  Thanks!

gl,
Lucas
0
 

Author Comment

by:Gary Gordon
ID: 16333727
Lucas,

Neither worked.

:(

So, I reset it back to what was there just before.  I hope Pravinisar can help.

Gary
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16333805
Ah, you have caught my interest on this one...
 
Just to give my analysis on this.  It looks as though it is removing spaces once in gets over 20 words yet allows >2000 chars.  The JS is over my head though.  

gl,
Lucas

ps - that latter one I wrote in earlier was the exact code in textarea.js.
>Gary, can you replace this function with the one below and try?
-this was backwards?! I meant to replace the script I wrote (top) with the one Pravinisar wrote(bottom)
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 1000 total points
ID: 16334073
I  have a posted example with the same code, at ny site

http://www.asarconsultants.com/test/textAreaLimit.htm

That one does

1. Word Count Check
2. Character Count check.
3. Alert with red colored text whenever  a either word limit or character limit is reached (what ever is first).
4. Limits user from entire new text by replacing automatically.

After integrating the code, it is not working, that means the component you are using has some retrictions... (and I am
not an expert with the component you are using).

So I really do not know, in what way I can help.

PA
0
 

Author Comment

by:Gary Gordon
ID: 16334114
Lucas,

I just did that.  And .. the weird thing went away, but .. nothing was working when I used your script.  I don't think it was finding the textAreaId's or something. (Just a thought).

Gary
0
 
LVL 3

Expert Comment

by:Kudzullc
ID: 16334154
g,
Did it work in any area, maybe first?  I left out the loop part when I wrote it.

Lucas
0
 

Author Comment

by:Gary Gordon
ID: 16334730
Pravinisar,

Thanks.

That worked fine.  The Word count still seems to burp, and not react quite well, but .. I think I have taken up enough of your time with this effort.  :-)  I appreciate it.

Gary
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question