Solved

Textarea with max number of lines and max characters per line

Posted on 2002-06-03
8
4,413 Views
Last Modified: 2007-11-27
Hi all,

I have a textarea which should allow the user to enter 4 lines. Number of lines<= 4. Also, in each line there cannot be more than 35 characters.

ie the max number of lines is defined and also the maximum number of characters per line is defined.

Is there any way of doing this?

thanks in advance,
Jacob


 
0
Comment
Question by:jmarcus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 5

Accepted Solution

by:
kcm76 earned 100 total points
ID: 7051096
the following code will restrict the data entry upto 35 characters.

**for four line i ll get back to u. i have not yet tried, and im going home i ll post it tomorrow**

<HTML>
<HEAD>
<SCRIPT>
function checkMaxLength (textarea, evt, maxLength) {  
  var allowKey = false;
  var keyCode = document.layers ? evt.which : evt.keyCode;
    if (keyCode < 32 && keyCode != 13)
      allowKey = true;
    else          
      allowKey = textarea.value.length < maxLength;  
  textarea.selected = false;
  return allowKey;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<TEXTAREA NAME="aTextArea" ROWS="2" COLS="60" WRAP="soft"
          ONKEYDOWN="return checkMaxLength(this, event, 35)"></TEXTAREA>
</FORM>

</BODY>
</HTML>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7051106
<html>
<head>
<title>TextArea</title>
<script language="javascript">
function checkIt(el) {
  var aLines = el.value.split("\n");
  alert("The number of lines is " + aLines.length);
}
</script>
</head>
<body>
<textarea cols="35" rows="4" onchange="checkIt(this);"></textarea>
</body>
</html>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 7051114
This returns the number of lines. The thing with textareas is that although you specify a limit of 35 characters per line (cols=35) and a limit of 4 rows (rows=4), the textarea can accept more than that. The implementation of checking the textarea can happen either at point of submission of form or as a validation process at point of entry into the textarea. This is generally better supported by MSIE4+ and Netscape 6.x. NN 4.x really is an anachronistic hogwash of a browser.
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 23

Expert Comment

by:b1xml2
ID: 7051208
There are issues that you must grapple with, jmarcus as users can type away many times or press enter to go to a new line explicitly.

<html>
<head>
<title>TextArea</title>
<script language="javascript">
var iMax = 4 * 35;
function checkIt(el) {
  var aLines = el.value.split("\n");
  var iCount = 0;
  var szData = "";
  for (var i=0;i<aLines.length;i++) {
   iCount += aLines[i].length;
   if (i > 3) {
    szData = szData.substring(0,szData.length - 1);
    alert("Data has been truncated to " + szData.length + " of characters...");
    el.value = szData;
    break;
   } else if (iCount >= iMax) {
    szData += aLines[i];
    szData = szData.substring(0,iMax);
    alert("Data has been truncated to " + szData.length + " of characters...");
    el.value = szData;
    break;
   } else {
    szData += aLines[i] + "\n";
   }
  }
 
}

</script>
</head>
<body>
<form name="myform">
<textarea name="mytextarea1" cols="35" rows="4" onchange="checkIt(this);"></textarea><br>
</form>
</body>
</html>
0
 

Author Comment

by:jmarcus
ID: 7075186
Hi all,

The following code works the way I want. Thankyou for the comments.

regards,
Jacob

<html>
<head>
<title>TextArea</title>
<script language="javascript">
function controlTextAreaInput(textarea, maxlength, maxLines)
{

var mainString = textarea.value;
var len = mainString.length;
var aLines = mainString.split("\n");
var numberOfLines = aLines.length;

var indexOfCurrentLine = eval(parseInt(aLines.length)-1);
var string = aLines[indexOfCurrentLine];
var lastCharacter = string.charAt(eval(len-1));
var previousLines = "";

if (numberOfLines > maxLines){
     indexOfCurrentLine = maxLines;
}

for(var i=0;i<indexOfCurrentLine;i++){
     previousLines +=aLines[i];
}
var keyCode = document.layers ? event.which : event.keyCode;
if (keyCode==13){
     if (aLines.length >= eval(maxLines+1)){
          textarea.value = mainString.substr(0, eval(len-2));
          textarea.value = previousLines.substring(0,eval(previousLines.length-1));
     }
     else {
          return true;
     }
}
if (string.length > maxlength - 1)
     textarea.value = previousLines +string.substr(0, maxlength);
return;
}


</script>
</head>
<body>
<form name="myform">
<textarea name="mytextarea1" cols="40" rows="5" onkeyup="javascript:controlTextAreaInput(mytextarea1,35,4);"></textarea><br>
</form>
</body>
</html>
0
 

Author Comment

by:jmarcus
ID: 7075188
I am acceptiong this as this gave me initial idea. The complete solution is what I have given.
0
 

Expert Comment

by:ecchymose
ID: 10204342
Problem with last code pasted is that it causes problem when maxlength (characters) accepted is longer than what a line usually accept.

So putting 150 as maxlength and a limit of 4 lines, with a textarea "cols" property at 20,
you could enter way more than 4 lines before reaching 150 cars max.
0
 

Expert Comment

by:ecchymose
ID: 10204353
(to be more specific with previous post:)

...as when lines wrap automatically when it's too long, so no Enter key is pressed...
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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

752 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