Javascript/ Text Area Line Limits

Bes · 22 Dec 2010 at 23:29

Hi

I am trying to make a bit of javascript to limit the number of lines of text that can be put in a text area. At the moment it does limit the number of lines, but it needs to take wrapping into account. (i.e. if 3 lines are permitted, and there are already 2 lines because one has wrapped, it needs to consider this).

I am basing it on a script I found on the 'net.

To account for the wrapping, I propose having the JS insert a linebreak after a certain number of characters (I can write a regex to do this possibly), but the problem is that I don't know how to reference the following lines object(?)

The code is something like this:

PHP:

                var lines=el.value.replace(/\r/g,'').split('\n'),
                i=lines.length,^M
                lines_removed,^M
                char_removed;

Lines can be accessed as an associative array (e.g. if I print lines[0], I get everything up to the first carriage return entered by the user). If I just print lines, I get the entire contents of the object.

What I need to do is have a way to reference the current 'line' and insert a linebreak after n characters. I think this would then *almost* do what I want?

Any ideas much appreciated.

Thanks

SimonCHere · 23 Dec 2010 at 10:13

Merry Christmas:

Code:

<script>
var numberOfChars = 10
function fnaddlines()
{
var taTxtValue = document.getElementById('txt1').value;
var lines=taTxtValue.replace(/r/g,'').split('\n');
var taResult = document.getElementById('result');
  for (var i=0;i<lines.length;i++){
    var thisLine = lines[i];
    if (thisLine.length > numberOfChars){
	  while(thisLine.length > numberOfChars){
	    taResult.value += thisLine.substr(0,numberOfChars) + '\n';
            thisLine = thisLine.substr(numberOfChars);
	  }
	  if(thisLine.length >0) taResult.value += thisLine + '\n';
    }
    else
    {
      taResult.value += lines[i] + '\n';
    }
  }
}
</script>

Oh and I love your sig!

Bes · 23 Dec 2010 at 21:38

Hi mate,

Thanks for this, but it doesn't seem to work. Is txt1 meant to be result? and also numberofChars seems to be undefined? I tried defining it myself, but it seems like it doesn't want to work.

Any ideas at all?

Thanks

SimonCHere · 24 Dec 2010 at 09:30

Sorry I thought it would be obvious that 'txt1' and 'result' were 2 text areas on the page.
here is the full HTML.
NumberOfChars is defined at the top just under the script tag.

Code:

<html>
<head>
<script>
var numberOfChars = 10 //this is how many characters you want in your line
function fnaddlines()
{
var taTxtValue = document.getElementById('txt1').value; //get the text from your input text area
var lines=taTxtValue.replace(/r/g,'').split('\n'); //take out the /r which is for IE only I think and split on new lines.

//This is the output text area. you could use the input one instead
//but I just wanted to show the input and output.
var taResult = document.getElementById('result'); 

  for (var i=0;i<lines.length;i++){ //this loops through all the lines in the lines[] variable
    var thisLine = lines[i]; //Current line.

    if (thisLine.length > numberOfChars){ //not really needed as the while will take care of it but I like to be sure.
	  while(thisLine.length > numberOfChars){ //you only want to cut up lines that are longer than you need.

                //take the first x characters and add to the result textarea and then add a new line character
	        taResult.value += thisLine.substr(0,numberOfChars) + '\n'; 

                //reset thisLine to what remains of this line
		thisLine = thisLine.substr(numberOfChars);
	  }
          //remember to write out what is left after cutting up the current line.
	  if(thisLine.length >0) taResult.value += thisLine + '\n';
    }
    else
    {
      //only needed is you use the check for line length instead of the while loop.
      taResult.value += lines[i] + '\n';
    }
  }
}
</script>
</head>
<body>
<textarea id ='txt1' cols='20' rows='10'></textarea><br/><br/>
<input type='button' onclick='fnaddlines()' value ='Run'></input><br/><br/>
<textarea id='result' cols='100' rows='100'></textarea>
</body>
</html>

Bes · 24 Dec 2010 at 17:49

Thanks

I really would like it if it were possible to contain this to a single textarea though. I have added you to MSN (from trust) to ask a question about this if it is OK?

Thanks

SimonCHere · 24 Dec 2010 at 21:55

Just change the line

Code:

var taResult = document.getElementById('result');

to

Code:

var taResult = document.getElementById('txt1');
taResult.value="";

like you mentioned earlier.

I've accepted your MSN but I'll probably not be on it until next year!