...

View Full Version : Limit lines and charachters in a textarea



loydall
12-13-2011, 03:56 PM
Hi - I have the following requirement for a textarea:

Limit the number of lines to 8
Limit the number of characters to 20 per line
Force a line beak when the user reaches he end of a line but break the line at the start of the last word (not half way through the word).
Allow pasting into the field and auto-format the line/character count
Keep he cursor where it should be (don't move it to the end of the field after any formatting)

This is more complicated than it sounds - anyone worked on something similar?

Old Pedant
12-13-2011, 11:54 PM
All reasonably doable except "keep the cursor where it should be".

DO NOT USE CODE BELOW...

For some cases it gets into infinite loop & crashes browser. I'll see if I can fix it. In meantime, don't use it.



<html>
<head>
<script type="text/javascript">
function pretty()
{
var form = document.forms[0];
var ta = form.myTextArea;
var lines = ta.value.split("\n");
for ( var i = 0; i < lines.length; ++i )
{
var line = lines[i];
if ( line.length > 20 )
{
var l20 = line.substr(0,20);
if ( line.charAt(20) == " " )
{
lines[i] = l20;
line = line.substr(21);
} else {
var sp = l20.lastIndexOf(" ");
lines[i] = l20.substr(0,sp);
line = line.substr(sp+1);
}
var nextline = lines[i+1];
if ( nextline == null )
{
nextline = "";
} else {
nextline = " " + nextline;
}
lines[i+1] = line + nextline;
}
}
while ( lines.length > 8 ) lines.splice(8,lines.length-8);
var newvalue = lines.join("\n");
if ( ta.value != newvalue ) ta.value = newvalue;
}
setInterval( pretty, 250 );
</script>
<body>
<form>
<textarea name="myTextArea" rows="8" cols="20"></textarea>
</form>
</body>
</html>

Not quite sure how I'd go about keeping cursor in right place.

Old Pedant
12-14-2011, 02:16 AM
Only possibly infinite loop I see in there is this one:

while ( lines.length > 8 ) lines.splice(8,lines.length-8);

So presumably we could rewrite that to avoid possibility of infinite loop.

Old Pedant
12-14-2011, 02:52 AM
Okay, I *THINK* this version fixes the bug. Use it at your own risk.


<html>
<head>
<script type="text/javascript">
function pretty()
{
var form = document.forms[0];
var ta = form.myTextArea;
var lines = ta.value.split("\n");
for ( var i = 0; i < lines.length && i < 9; ++i )
{
var line = lines[i];
if ( line.length > 20 )
{
var l20 = line.substr(0,20);
if ( line.charAt(20) == " " )
{
lines[i] = l20;
line = line.substr(21);
} else {
var sp = l20.lastIndexOf(" ");
lines[i] = l20.substr(0,sp);
line = line.substr(sp+1);
}
var nextline = lines[i+1];
if ( nextline == null )
{
nextline = "";
} else {
nextline = " " + nextline;
}
lines[i+1] = line + nextline;
}
}
newvalue = lines[0];
for ( var n = 1; n < lines.length && n < 8; ++n )
{
newvalue += "\n" + lines[n];
}
if ( ta.value != newvalue ) ta.value = newvalue;
}
setInterval( pretty, 250 );
</script>
</head>
<body>
<form>
<textarea name="myTextArea" rows="8" cols="20"></textarea>
</form>
</body>
</html>

The culprit was that any string of more than 20 characters without a space could cause infinite loop. I limited the loops now in two places to never go beyond the 8 lines.

But this still doesn't fix the "leave the cursor where it is" problem.

Philip M
12-14-2011, 08:34 AM
var l20 = line.substr(0,20);

I was about to point out that a javascript variable name may not start with a number, and the realised that you are using a lower case L.
120 and l20 look very similar, especially in code tags
120 and l20

For myself I always avoid using l and o which can easily be confused with digits.

Old Pedant
12-14-2011, 08:48 AM
It's just because I was too lazy (for this simple demo) to write "first20characters" or something more descriptive. SO "l20" was short for "left20".

But you make a good point. Even in demos like this I should make the variable names clear.

loydall
12-14-2011, 02:42 PM
Thanks - this isn't bad - kind of where we are up to. Still a bit buggy when you put the cursor in the middle of text and add new lines and also a few other bugs but it's a good effort.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum