Solved

Textarea question????

Posted on 2001-08-10
17
348 Views
Last Modified: 2012-08-14
Hello

How can I limit the input the number of caracters or lines
in a textarea? And also, How can I count' the lines and caracters of a textarea.

What I want to do is only to limit the editible area to
the visible area of the textarea. Input tag isn't a solution because I need a field that has a multiline
property.

Is is it possible with a Style?


Please help me
I am short of time

Fernando Guerreiro
0
Comment
Question by:fguerreiro_inix
  • 5
  • 4
  • 2
  • +4
17 Comments
 
LVL 14

Expert Comment

by:avner
ID: 6373818
<TEXTAREA style="width:100px;height:100px">
0
 
LVL 14

Expert Comment

by:avner
ID: 6373822
You cannot count the lines on the client side , but you can do that on the server side with counting the chr(13)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6373884
If you need to control the numbe of lines and the number of characters
per lines use a set of text boxes and then concatenate the strings to
send them to the server.

<html>
<head>
   <title> Multi-line input </title>
<style>
</style>
<script language="JavaScript">
<!--
   function loopall()
   {
      for(i=0;i<20;i++)
      {
         document.theform.allfields.value+=document.theform[i].value;
      }
      document.theform.submit();
   }
//-->
</script>
</head.
<body>
<form name="theform" action="">
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="text" size="55" maximum="55"><br>
<input type="hidden" name="allfields">
<input type="button" value="doit" onClick="loopall()">
</form>
</body>
</html>

If you need a count of the characters, you should be able to get
that from document.theform.allfields.value.length.


HTH

Cd&
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6374090
You can also use a textarea and a little bit of javascript...

What you'd do is use the <textarea onchange=""> event and whenever the textarea changes it checkes the length when it is more then the maximum length (you could give a parameter to check that) it will make the textarea loose it's focus...

Max.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6375690
character count is controllable.  The problem is line count and control.

Cd&
0
 
LVL 10

Expert Comment

by:dij8
ID: 6375889
I think this is about as good as you will get:
<script language="JavaScript" type="text/javascript">
<!-- // cloak
function checksize(field) {
  maxlength = 250 // maximum number of characters
  rownum = 4 // must be 2 less than rows in textarea
  entercount = 0
  for (c=0;c<field.value.length;c++) {
    if (field.value.charCodeAt(c)==10) {
      entercount += 1
      if (entercount>rownum) {
        maxlength = c
        c=field.value.length
      }
    }
  }
  if (field.value.length>maxlength) {
    field.value = field.value.slice(0,maxlength)
  }
}
// decloak -->
</script>
<textarea rows="6" cols="60" onkeydown="checksize(this)" onkeyup="checksize(this)"></textarea>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6375903
Row is not counted if it wraps?

Cd&
0
 
LVL 10

Expert Comment

by:dij8
ID: 6377545
Correct.  I thought about doing that as well but it would have been a little more difficult.  Maybe I will anyway.
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 10

Accepted Solution

by:
dij8 earned 300 total points
ID: 6377575
Looks like it wasn't that hard afterall.  this seems to work:
<script language="JavaScript" type="text/javascript">
<!-- // cloak
function checksize(field) {
  maxlength = 300 // maximum number of characters
  rownum = 4 // must be 2 less than rows in textarea
  colnum = 59 // must be 1 less than cols in textarea
  colcount = 0
  entercount = 0
  for (c=0;c<field.value.length;c++) {
    if (field.value.charCodeAt(c)==10) {
      entercount += 1
      colcount = 0
    } else if (colcount>colnum) {
      entercount += 1
      colcount = 0
    } else {
      colcount += 1
    }
    if (entercount>rownum) {
      maxlength = c
      c=field.value.length
    }
  }
  if (field.value.length>maxlength) {
    field.value = field.value.slice(0,maxlength)
  }
}
// decloak -->
</script>
<textarea rows="6" cols="60" onkeydown="checksize(this)" onkeyup="checksize(this)"></textarea>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6377596
Now just add a calculation of typing speed and gift wrap it.  ;^)

Cd&
0
 
LVL 3

Author Comment

by:fguerreiro_inix
ID: 6380792
Hi dij8, your comment was the better aproach,
but my problem isn't yet solved.

Question?
It is not possible to prevent the letter typed
never to be viewed.

By the way, this must be done in a key...something
event, but the event must be attached in runtime,
how I am going to do this?

Thanks
Fernando Guerreiro

0
 
LVL 10

Expert Comment

by:dij8
ID: 6381170
Ain't gonna happen.  The earliest something can happen is when the key is pressed down (onkeydown event).  Pressing the key down is when the the system sends the character of the key pressed to the browser.  Which means the letter is going to appear.  You can not stop the letter appearing, you can only remove it if it breaks a certain criteria.  Sorry but that is the way textareas work.

And please, just because it isn't the answer you want, if it is as close as you are going to get then give the grade the comment deserves (assuming you even accept a comment as an answer).

As much as I said it wasn't hard afterall, I meant adding the word wrapping part.  I have never seen anyone else do anything like that.  I did put some time and effort into this question.
0
 
LVL 3

Expert Comment

by:CyberSoft
ID: 6381851
Just my two cents :)

If you want to just prevent a maximum number of characters to be exceeded here's a cut down version:

<!-- start code -->

<html>
<head>
     <title>Untitled</title>
     <script language="JavaScript">
     function validateMaxChars(theFormField, maxLength)
     {
          if (theFormField.value.length > maxLength)
          {
                  theFormField.value = theFormField.value.slice(0,maxLength)
               alert("Maximum character length reached for this field (" + maxLength + ")")
               theFormField.focus()
          }
     }
     </script>
</head>

<body>

<form>
     <textarea name="field1" onKeyPress="validateMaxChars(this, 300)" wrap="physical" rows="10" cols="50"></textarea>
</form>

</body>
</html>

<!-- end code -->

Regards,
CyberSoft
0
 
LVL 1

Expert Comment

by:james_beilby
ID: 6390292
Actually you can disallow a character appearing - simply return false to the OnKeyDown event handler...

e.g.

<html>
<head>
<script>
var noMoreLines=true;

function validateChar(evnt){
  return (noMoreLines && evnt.keyCode==13);
}
</script>
</head>
<body>
<textarea rows=5 cols=5 onKeyDown="return allowKey(event)">
</textarea>
</body>
</html>

Just integrate this into the scripts above by setting noMoreLines to true/false depending if the current line count is the maximum allowable. The same can be done for a maximum character limit.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6425130
Looks like a waste of time trying to help this one.

Cd&
0
 
LVL 3

Expert Comment

by:CyberSoft
ID: 6425378
Yeah seems so Cd&, since it's been 12 days now and no response from fquerreiro_inix. Fquerreiro_inix it is customarry and just plain polite to keep track of questions you post and to respond to experts offering you assistance since you requested it in the firstplace. By not responding in a timely fashion or managing your questions properly you'll end up causing experts who commonly answer questions to eventually ignore you as they know their help goes unanswered.

Regards,
CyberSoft
0
 
LVL 3

Author Comment

by:fguerreiro_inix
ID: 6428120
Sorry about the delay, I've been away...

Not completely solve my problem but here are the points.


Thank you

Fernando Guerreiro

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 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

22 Experts available now in Live!

Get 1:1 Help Now