• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5383
  • Last Modified:

Textarea with max number of lines and max characters per line

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
jmarcus
Asked:
jmarcus
  • 3
  • 2
  • 2
  • +1
1 Solution
 
Chandramouli kArchitectCommented:
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
 
b1xml2Commented:
<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
 
b1xml2Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
b1xml2Commented:
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
 
jmarcusAuthor Commented:
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
 
jmarcusAuthor Commented:
I am acceptiong this as this gave me initial idea. The complete solution is what I have given.
0
 
ecchymoseCommented:
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
 
ecchymoseCommented:
(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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now