Solved

Textarea with max number of lines and max characters per line

Posted on 2002-06-03
8
3,985 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
  • 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
 
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
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.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

743 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

12 Experts available now in Live!

Get 1:1 Help Now