Solved

Textarea with max number of lines and max characters per line

Posted on 2002-06-03
8
4,615 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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

627 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