Solved

Textarea maximum characters, also calculating line breaks.

Posted on 2006-06-22
5
1,315 Views
Last Modified: 2013-12-03
I have a textarea that is the entry point to a database via coldfusion for text that is displayed on a flash interface. I do not want my text to scroll so I need to limit the number of characters in my textarea entry point (600 characters).

My code as of now will display the amount of characters left out of 600 as you type using onkeyup calling javascript event as well as onkeypress calling javascript that will stop you once the 600 character limit has been reached. Here is the gutted code.

<html>
<head>
<script language = "Javascript">
function taLimit() {
      var taObj=event.srcElement;
      if (taObj.value.length==taObj.maxLength*1) return false;
}
 
function taCount(visCnt) {
      var taObj=event.srcElement;
      if (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1);
      
      if (visCnt) visCnt.innerText=taObj.maxLength-taObj.value.length;
}
</script>
</head>

<body>
<form action="xxx" name="edit_home" method="POST">
  <textarea name="first_column" cols="68" rows="10" onkeypress="return taLimit()" onkeyup="return taCount(myCounter)" maxLength="600"></textarea>
  <br>
  You have <B><SPAN id=myCounter>600</SPAN></B> characters remaining
  for your description.
</form>
</body>
</html>

Here is the problem when a line break/carriage return is entered the value is only subtracting 2 characters from the total limit, I would like to know how to have this code also consider and calculate line breaks depending on the location of where the line break has been entered. Just like if instead of hitting Return(2 characters) you hold the spacebar for 10 seconds and get your 15 characters.

Here is an attemted visual example.
textarea through code above
600 minus the following updated as keystrokes are made
-----------------------------------------------------------------
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1
1-1-1-1-1-1-1-1-1-(2)line break
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-
1-1-1-1-1-1-(2)line break
...
-----------------------------------------------------------------

I would like it to function like this...
-----------------------------------------------------------------
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1
1-1-1-1-1-1-1-1-1-(13)line break
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1
1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1
1-1-1-1-1-1-(17)line break
...
-----------------------------------------------------------------

This is a toughy. I will be impressed if there is an Expert with this answer. Any help at all would be greatly  appreciated.
0
Comment
Question by:kylevn
  • 3
5 Comments
 
LVL 2

Expert Comment

by:Mr_Lenehan
Comment Utility
I'm not sure what your problem actually is.  I don't understand what you are trying to say about line breaks... are you saying that your counter is not taking into account space characters? Can you clarrify a bit?

I have similar code to yours doing the same task and mine works fine:
<html>
<head><script language="JavaScript" type="text/JavaScript"><!--
var maxChars = 1000;
var theCharCounter = 0;

function isIE(){
  var detect = navigator.userAgent.toLowerCase();
  if (detect.indexOf("msie")!=-1)
  {
         return true;
  }
  else{
    return false;
  }
}
function textCounter(theField) {
      var ieIncrement =0;
      for (var i = 0; i < theField.value.length; i++)
      {
            var strChar = theField.value.substring(i, i + 1);
            if (strChar == '\n')
            {
                  if (isIE()){
                    ieIncrement++;
                }
          }
      }
      if (theField.value.length>maxChars ) {
            theField.value=theField.value.substring(0,theField.value.length-(theField.value.length-maxChars));
      }            
      theCharCounter = maxChars - theField.value.length + ieIncrement;
      chars.innerHTML = theCharCounter;
}
//--></script>
</head>
<body>
Characters left: <span id="chars"><script type="text/JavaScript">document.write(maxChars);</script></span><br>
<textarea name="longText" cols='50' wrap='virtual' rows='20' onKeyup="textCounter(this);"></textarea>
</body>
</html>

Maybe seeing an alternative will help? If not try rephrasing the question and I'll see what I can come up with.
0
 

Author Comment

by:kylevn
Comment Utility
Thanks for the response.
Our code does the same thing but with different a slightly different approach. Take notice when you hit enter within the textarea it only subtracts 2 characters.

Here is a test, in your textarea example just keep hitting the enter key your text will be a mile long (500 lines to be exact) until it reaches 1000 characters. I cant have my end user enter 4 line breaks and think they still have tons of characters left because once the text is displayed on the front end there is a specific amount of space 400px x 300px.  Our counters work great until a line break is entered. I would like to know how to calculate when a line break is entered the counter will subtract the remaining amount of characters left in a line.

Example of how it does not function as needed
___________________________
The quick brown fox jumps over| <--- -30 characters
the lazy dog. Here is some more| <-- -31 characters
text.                                        | <-- -7 characters with hard return (text.)=5 characters - 2 for the hard return
The quick brown fox jumps over| <--- -30 characters
the lazy dog.                            | <-- -13 characters
___________________________


Example of how I need it to calculate
___________________________
The quick brown fox jumps over| <--- -30 characters
the lazy dog. Here is some more| <-- -31 characters
text.                                        | <-- -5 characters with hard return -25 remaining characters
The quick brown fox jumps over| <--- -30 characters
the lazy dog.                            | <-- -13 characters
___________________________

Thanks again.
0
 

Author Comment

by:kylevn
Comment Utility
I have come up with a different perspective solution, although I would still like to know the answer to my previous question.

I have created the backend using flash (sendAndLoad) to a coldfusion document and used the same size textbox and font size and disabled the ablity to scroll so now the entry point is the same size as the output preventing overflow.

0
 
LVL 3

Accepted Solution

by:
gugfuz earned 500 total points
Comment Utility
Here you go:
<html>
<head>
<script language = "Javascript">
function taCount(visCnt) {
  var taObj=event.srcElement;
  var taObjLength = 0;
  var taTomuch = 0;
  var taObjArr = taObj.value.split("\n");
  var taObjSrc = "";
 
  for (x in taObjArr){
        taObjSrc += taObjArr[x];
        if (x!=0) taObjLength += 2;
        if ((taObjLength + taObjArr[x].length) > taObj.maxLength){
            taTomuch = (taObjLength + taObjArr[x].length) - taObj.maxLength;
            if (taTomuch != 1) taTomuch -= 1;
            taObjSrc = taObjSrc.substring(0,taObjSrc.length  - taTomuch);
            taObj.value = taObjSrc;
            break;
        }
      taRestLength =  67 - ((taObjArr[x].length + 1)%67) - 1;  
      taObjLength += taObjArr[x].length + taRestLength;
      taObjSrc += "\n";
  }
  if (visCnt && (taTomuch == 0)){
        visCnt.innerText=taObj.maxLength-taObjLength + taRestLength;
      } else {
      taCount(visCnt);
      }
}
</script>
</head>

<body>
<form action="xxx" name="edit_home" method="POST">
  <textarea name="first_column" cols="68" rows="10" onMouseUp="return taCount(myCounter);" onkeyup="return taCount(myCounter);" maxLength="600"></textarea>
  <br>
  You have <B><SPAN id=myCounter>600</SPAN></B> characters remaining
  for your description.
</form>
</body>
</html>
0
 

Author Comment

by:kylevn
Comment Utility
Beautifly done. I'm impressed.

Only thing, define the variable value=0; to get rid of the syntactical error, other than that it works perfectly.

Thank you for your help.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
XSLT 5 36
css help 3 92
Disabling automatic web page translations 9 31
What is the normal amount of queries 5 68
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now