Solved

Textarea with max number of lines and max characters per line

Posted on 2002-06-03
8
4,156 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 50
show form submit button based on jquery sum 5 31
Best Way to remove the port from a URL? 15 38
Grunt script for Build Process 1 29
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

832 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