Click to See Complete Forum and Search --> : Restricting Textarea Input
moreta
06-18-2003, 11:56 AM
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
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 all?
Jona
moreta
06-18-2003, 12:31 PM
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. 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... bad 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
//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;
Jona
moreta
06-18-2003, 01:38 PM
if(document.formname.textareaName.value.split("\n").length > 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. :D
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
I didn't test the code, so I don't know if it will work, but yes, take a shot at it. ;)
Jona
moreta
06-18-2003, 03:13 PM
I didn't test the code, so I don't know if it will work....Jona, you are too modest. It's elegant. :cool:
//function to limit lines/length of input
function limitLL(val)
{ formObj = document.endform;
if(val.split("\n").length > 6) {return false;}
for(i=0;i<6;i++){
if(val.split("\n")[i].length > 75){return false;} }
return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
...
<TEXTAREA style="width=90%" ROWS="6" WRAP="YES"
NAME="EndRequest" onKeypress="return limitLL
(this.value)"></TEXTAREA>
....
I can flesh it out from here. All the pieces were familiar, but what a wonderful revelation to be able to val.split("\n")[i].length!
Moreta
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).
<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>
Jona
moreta
06-18-2003, 04:26 PM
The original code works in IE, too. You lost me in your revised code at
if(x.join("").toString().length>75)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
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 wrap the value. To do this, we can go right after checking to see if it's over 75 characters:
if(x.join("").toString().length>75){
val.value+="\n"
return false;
}
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.
Jona
moreta
06-18-2003, 05:31 PM
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.:D I'll be back in the morning. (I'll try to sort out join() before then.)
Thank you,
Moreta
moreta
06-19-2003, 11:48 AM
I'm still trying to understand why we did the join()...
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, except 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<1;i++){
if(valArray[i].length > 10) {
//add 'x' so I can see what's happening
valArray[i]+="\n x";
alert(valArray[i]);
val=valArray.join("");
alert(val);
} }
return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA style="width=90%" ROWS="6" WRAP="YES"
NAME="EndRequest" onKeypress="return limitLL(this.value)">
</TEXTAREA>
Thank you,
Moreta
Originally posted by moreta
Do you see what I've done wrong?
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.
Jona
moreta
06-19-2003, 12:05 PM
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
Originally posted by moreta
The code adds the "\n x" to the Textarea for you? :eek:
Oh, that's what you wanted!? lol OK, let me take a crack at that.
Jona
Is this what you wanted?
<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>
Jona
moreta
06-19-2003, 01:35 PM
document.endform.EndRequest.value=valArray.join("");
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.):D
Jona, I really appreciate your patience and help.
Moreta
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...
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;
}
}