Solved

Textarea question????

Posted on 2001-08-10
17
358 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

837 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