Restricting Textarea Input

@moretaJun 18.2003

I need to limit input in a textarea element to 6 rows of no more than 75 characters each. (This is a restriction that will be applied when the information is later printed to close the transaction.)

I’ve searched HTML and JavaScript forums and have found ways to count characters, but it would be much simplier to count ROWS (as well as characters), since each row could hold different numbers of characters <=75, and I am definitely limited to 6 rows. Is there a way to do this?

Thank you,
Moreta

to post a comment

HTML

20 Comments(s) _↴

@JonaJun 18.2003 — #[font=arial][color=maroon]You could use Javascript to check each row individually and see if each of the six rows is greater than 75 characters. Or do you want to check to make sure there is a maximum of 6 rows, with less than 75 characters in [i]all[/i]?[/color][/font]

[b]Jona[/b]

@moretaauthorJun 18.2003 — #Jona! Thanks for responding!

You could use Javascript to check each row individually and see if each of the six rows is greater than 75 characters. [/QUOTE]That's what I'd like to do... as well as making sure they don't enter more than 6 rows worth of text. So far everything I've come up with to try to do it on the fly is really... [i]bad[/i] and I end up confused by my own code. ?

Would you mind helping me get started?

(Maybe I should have posted this in JavaScript forum. Wasn't sure, so took my best shot.)

Thank you,

Moreta

@JonaJun 18.2003 — #[font=courier new]

//Something like this untested code should help....

if(document.formname.textareaName.value.split("n").length > 6){return false;} else {

for(i=0;i<6;i++){

if(document.formname.textareaName.value.split("n")[i].length > 75){return false;}

return true;

[/font]

[b]Jona[/b]

@moretaauthorJun 18.2003 — #if(document.formname.textareaName.value.split("n").length > [/quote]I recognize the parts, but would never have come up with this! I'm still playing in the shallows... while all of my goals lie in the depths. ?

Will let you know if it works for me... or ask for help again if I can't figure it out from here.

Thank you,

Moreta

@JonaJun 18.2003 — #[font=arial][color=maroon]I didn't test the code, so I don't know if it will work, but yes, take a shot at it. ?[/color][/font]

[b]Jona[/b]

@moretaauthorJun 18.2003 — #I didn't test the code, so I don't know if it will work....[/quote]Jona, you are too modest. It's elegant. ?

//function to limit lines/length of input
 function limitLL(val)
 { formObj = document.endform;
 if(val.split("n").length &gt; 6) {return false;}
 for(i=0;i&lt;6;i++){ 
 if(val.split("n")[i].length &gt; 75){return false;} }
 return true; 
 }
 // --&gt;
 &lt;/SCRIPT&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 ...
 &lt;TEXTAREA style="width=90%" ROWS="6" WRAP="YES" 
 NAME="EndRequest" onKeypress="return limitLL
 (this.value)"&gt;&lt;/TEXTAREA&gt;
 ....

I can flesh it out from here. All the pieces were familiar, but what a wonderful revelation to be able to [b]val.split("n")[i].length[/b]!

Moreta

@JonaJun 18.2003 — #[font=arial][color=maroon]Luckily split() is handled by an array. I've tested the following code and it works in IE (other browsers have not been tested on).[/color][/font]

[font=courier new]

<script type="text/javascript">

//function to limit lines/length of input

function limitLL(val)

{ formObj = document.endform;

if(val.split("n").length > 6){

alert("Nope."); return false;}

for(i=0;i<6;i++){

var x = val.split("n");

if(x.join("").toString().length>75){

alert(x);

return false;

} }

return true;

}

</SCRIPT>

</head><body>

<form name="endform">

<TEXTAREA style="width=90%" ROWS="6" WRAP="YES"

NAME="EndRequest" onKeypress="return limitLL

(this.value)"></TEXTAREA>

</form>

[/font]

[b]Jona[/b]

@moretaauthorJun 18.2003 — #The original code works in IE, too. You lost me in your revised code at
if(x.join("").toString().length>75)[/quote]I'm good up to this statement.... I find toUpperCase, but not toString(). Join seems obvious, but I can't find an explanation on it either. (Obviously, I'm looking in the wrong place.) I haven't found a good reference for JavaScript. One that lists all properties as well as objects. If you know of one, it would be of great help. ("Teach a man to fish....")

When a textarea line reaches 75 characters, I'm trying to force a CR ("n") at the last word break(except line 6). I assume split, substr or substring are the way to go, but how to use them efficiently for this purpose is not near at hand. If you have ideas/suggestions, please share.

Thank you,

Moreta

@JonaJun 18.2003 — #[font=arial][color=maroon]A few good references are:

http://xref.org/

http://devedge.netscape.com/

http://msdn.microsoft.com/library/

The toString() method simply converts an object into string format. In this case, the split() method converts the strings in to an array of strings, and when I use the join() method, it replaces whatever is in the split() method's parameters with whatever is placed in the join() method's parameters. However, after this is done you cannot manipulate it until you turn the join()ed value back into a string.

If you'd like to put a new line after 75-characters, you want to [i]wrap[/i] the value. To do this, we can go right after checking to see if it's over 75 characters:[/color][/font]

[font=courier new]

if(x.join("").toString().length>75){

[b]val.value+="n"[/b]

return false;

}

[/font]

[font=arial][color=maroon]Although untested, the above code should start a new line in the textarea when it reaches its limit of 75 characters--on that individual line.[/color][/font]

[b]Jona[/b]

@moretaauthorJun 18.2003 — #xref.org redirects to pimlott.net/~chris/xref/... not a good thing; however MSDN was an obvious oversight on my part. Looks to be an excellent resource.

I'm still trying to understand why we did the join()... but I've struggled with this too many consecutive hours, and I'm slightly brain-dead. It will probably gel when I look at it in the morning. Or not.? I'll be back in the morning. (I'll try to sort out join() before then.)

Thank you,

Moreta

@JonaJun 18.2003 — #[font=arial][color=green]You're welcome! ?[/color][/font]

[b]Jona[/b]

@moretaauthorJun 19.2003 — #I'm still trying to understand why we did the join()... [/quote]
I understand why we join()... we need to put the array back together into the textarea value. toString() still eludes me, since join() returns a string (I think).

Everything seems to work fine, [u]except[/u] the value isn't returned to the Textarea. I tried it with and without toString. I also tried saving the joined array to this.value, val.value, and val. None of them copy the change to the Textarea.

Here's my test code... including alerts so I can see what's happening to the variables. It looks at only the 1st row (array element) to save setup time. Do you see what I've done wrong?

//function to limit lines/length of input
 function limitLL(val)
 { formObj = document.endform;
 valArray=val.split("n");
 for(i=0;i&lt;1;i++){ 
 if(valArray[i].length &gt; 10) {
 //add 'x' so I can see what's happening
 valArray[i]+="n x";
 alert(valArray[i]);
 val=valArray.join("");
 alert(val);
 } }
 return true; 
 }
 
 // --&gt;
 &lt;/SCRIPT&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;
 
 &lt;TEXTAREA style="width=90%" ROWS="6" WRAP="YES" 
 NAME="EndRequest" onKeypress="return limitLL(this.value)"&gt;
 &lt;/TEXTAREA&gt;

Thank you,

Moreta

@JonaJun 19.2003 — #[i]Originally posted by moreta [/i]

[B]Do you see what I've done wrong?

[/B][/QUOTE]

[font=arial][color=maroon]The code works fine for me--but you have it set up to only validate ten characters on the first line. I get no errors and the tested code works.[/color][/font]

[b]Jona[/b]

@moretaauthorJun 19.2003 — #Good morning, Jona. You're quick!

The code adds the "n x" to the Textarea for you? :eek: The change shows up in the alert boxes for me, but not in the Textarea element. Please confirm that it adds the "n x" to <Textarea>.

I limited my test to 1 row and 10 characters while I test the concept (and learn to use it properly). It'll go back to 75 for the real deal.

Thank you,

Moreta

@JonaJun 19.2003 — #[i]Originally posted by moreta [/i]

[B]The code adds the "n x" to the Textarea for you? :eek: [/B][/QUOTE]

[font=arial][color=maroon]Oh, that's what you wanted!? lol OK, let me take a crack at that.[/color][/font]

[b]Jona[/b]

@JonaJun 19.2003 — #[font=arial][color=maroon]Is this what you wanted?[/color][/font]

[font=courier new]

<script>

function limitLL(val)

{ formObj = document.endform;

valArray=val.split("n");

for(i=0;i<1;i++){

if(valArray[i].length > 10) {

//add 'x' so I can see what's happening

valArray[i]+="n x";

document.endform.EndRequest.value=valArray.join("");

} }

return true;

}

// -->

</SCRIPT>

</HEAD>

<BODY>

<form name="endform">

<TEXTAREA style="width=90%" ROWS="6" WRAP="YES"

NAME="EndRequest" onKeypress="return limitLL(this.value)">

</TEXTAREA>

</form>

[/font]

[b]Jona[/b]

@moretaauthorJun 19.2003 — #document.endform.EndRequest.value=valArray.join(""); [/quote]
Sometimes you have to hit me in the head with the obvious. I'm so thrilled with what I've learned, that a bump on the noggin is a small price to pay.

With all the components working (and understood), I should be okay to put everything together on my own.

(Backup plan... I'll start a new thread in JS forum.)?

Jona, I really [u]appreciate[/u] your patience and help.

Moreta

@JonaJun 19.2003 — #[font=arial][color=maroon]You're welcome. ?[/color][/font]

[b]Jona[/b]

@GiliJun 05.2006 — #i came up with this:

function limit(t, rows) {

chars = 16;

a = t.value.split('n');

//add new line for each line > chars

if (a[a.length-1].length >= chars){

t.value += 'n';

}

//return string cut from last char

if (a.length > rows){

t.value = t.value.substring (0, t.value.length - 1);

}

}

[...]

<textarea OnKeyUp="return limit(this, 3)" name="something"></textarea>

this will limit for 16 chars per row and 3 lines

however, OnKeyUp is not good enought, i can type more if using ctrl+v for example. Adding on key down has weird result...

@GiliJun 06.2006 — #i think i have it. it will limit the no of characters on each line and will stop at a no of rows

so the text in the textarea won't exceed a rectangle chars*rows

function limit(t, rows) {

chars = 16;

a = t.value.split('n');

//last line

lastLine = a[a.length-1].length;

if (lastLine >= chars){

val = '';

for (i=0; i < a.length; i++){

val += a[i].substring(0,chars)+"n";

}

t.value = val;

}

b = t.value.split('n');

if (b.length > rows){

val = '';

for (i=0; i < rows; i++){

val += b[i].substring(0,chars)+"n";

}

t.value = val;

}

}

Also in #HTML _↴

Question about <meta> tags Imgage 100% of background Webpage Refresh

Success!

Help @moreta spread the word by sharing this article on Twitter...

Tweet This

Restricting Textarea Input

20 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Restricting Textarea Input

20 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #HTML _↴