Comment from seanpowell Date: 10/29/2003 am PST |
Comment |
|
Hi, you're best bet is to set this in a basic javscript function, like so: <HTML> <Head> <Title> Category </title> <Script language = "JavaScript" type = "text/JavaScript"> <! -- Function validate (){ Maxlength = 50; If (document. myform. thetextarea. value. length> = maxlength ){ Alert ('your comments must be 50 characters or less '); Document. myform. thetextarea. Focus (); Return false; } Else { Return true; } } // --> </SCRIPT> </Head> <Body> <Form name = "myform" onsubmit = "Return validate ();"> Comments: <br/> <Textarea name = "thetextarea" Cols = "10" rows = "3"> </textarea> <br/> <Input type = "Submit"> </Form> </Body> </Html> How to customize ================ Make sure that you change the following 2 values to suit your page, both in the Javascript, and the form: 1. myform 2. thetextarea If the name of your form is hello and the name of your text area is goodbye, then the code above wocould be: Function validate (){ Maxlength = 50; If (document. Hello. Goodbye. value. length> = maxlength ){ Alert ('your comments must be 50 characters or less '); Document. Hello. Goodbye. Focus (); Return false; } Else { Return true; } } And <Form name = "hello" onsubmit = "Return validate ();"> Comments: <br/> <Textarea name = "goodbye" Cols = "10" rows = "3"> </textarea> <br/> <Input type = "Submit"> </Form> Thanks |
Comment from chitramahadik Date: 10/29/2003 am PST |
Author comment |
|
Hi, I knew it can work instead if I called the same JavaScript function onchange event of textarea, it will work but I can't specify maxlength = 50 to textarea object, the same is working for Text object. |
Comment from seanpowell Date: 10/29/2003 am PST |
Comment |
|
That's because the textarea object does not use the "maxlength" property. It only supports the attributes: columns, rows, and name. |
Accepted answer from deltreme Date: 10/30/2003 am PST Grade: B |
Accepted answer |
|
I 've got a script to add the maxlength property to the textarea tag (I didn't write it, found it somewhere on the net ): You'll need a file, called maxlength. HTC (code below) wich adds a behaviour to the textarea tag. In your stylesheet, add: Textarea {behavior: URL (maxlength. HTC );} From that point on, you can use <Textarea maxlength = 50> </textarea> Whereever you want. --- Code for maxlength. HTC --- <Public: component id = "bhvmaxlength" Urn = "maF: maxlength"> <Public: property name = "maxlength"/> <Public: attach event = "onkeypress" handler = "dokeypress"/> <Public: attach event = "onbeforepaste" handler = "dobeforepaste"/> <Public: attach event = "onpaste" handler = "dopaste"/> <Script language = "jscript"> // Keep user from entering more than maxlength characters Function dokeypress (){ If (maxlength & value. length> maxLength-1 ){ Event. returnvalue = false; Maxlength = parseint (maxlength ); } } // Cancel default behavior Function dobeforepaste (){ If (maxlength) Event. returnvalue = false; } // Cancel default behavior and create a new paste routine Function dopaste (){ If (maxlength ){ Event. returnvalue = false; Maxlength = parseint (maxlength ); VaR OTR = element.doc ument. selection. createRange (); VaR iinsertlength = maxlength-value. Length + OTR. Text. length; VaR sdata = Window. clipboardData. getdata ("text"). substr (0, iinsertlength ); OTR. Text = sdata; } } </SCRIPT> </Public: component> |
Comment from kingromes Date: 06/07/2004 0:06 PM PDT |
Comment |
|
I assume that is an ie-only solution (tested in Mozilla Firefox ). Neat trick tho' |
Comment from nishaj Date: 07/13/2004 :41 am PDT |
Comment |
|
I cocould not make this work using IE6/JavaScript. Maybe I am doing something wrong. Added the line to the CSS as abve to add the behavior to textarea. Added the HTC file with the code from above-just changed the script language = JavaScript. Used the input tag as <textarea maxlength = 5> as a test. It just doesn' t do anything. |
comment from gfdos date: 09/03/2004 10:33 am pdt |
comment |
|
I found this on the Net, and it seems to fix the problems described herein: called like this: |
Comment from bharatpanthee Date: 12/16/2004 0:02 am PST |
Comment |
|
There is no property like maxlengh in textarea u can use JavaScript For check this Code for this <Script language = "JavaScript"> VaR text1; Function checklength (I) { VaR txt; TXT = Document. Form. textarea1.value; N = TXT. length; If (n> I) // I is the maxlength of textarea which we have set to 80 { Alert ('text overflow '); Document. Form. textarea1.value = text1; Return; } Text1 = Document. Form. textarea1.value; } </SCRIPT><Body> <Form> <Textarea name = textarea1 onkeydown = "javascript: checklength (80)"> </textarea> </Form> </Body> I think this will help u. |
Comment from biffsmith Date: 03/04/2005 06:00 am PST |
Comment |
|
The Validate () works like a charm. Thank you! Now what if the form contains more than one textarea? I attempted to add additional variables to the script but I'm certain I have the syntax wrong: <Script language = "JavaScript" type = "text/JavaScript"> <! -- Function validate (){ Maxlength = 200; If (document. Form. comments1.value. length> = maxlength ){ Alert ('your comments must be 200 characters or less '); Document. Form. comments1.focus (); Return false; } Else { Return true; } } Function validate1 (){ Maxlength = 200; If (document. Form. comments2.value. length> = maxlength ){ Alert ('your comments must be 200 characters or less '); Document. Form. comments2.focus (); Return false; } Else { Return true; } } Function validate2 (){ Maxlength = 200; If (document. Form. comments3.value. length> = maxlength ){ Alert ('your comments must be 200 characters or less '); Document. Form. comments3.focus (); Return false; } Else { Return true; } } // --> </SCRIPT> And then in the form tag, I called it as such: Onsubmit = "Return validate (); Return validate1 (); Return validate2 ()" Since it doesn't work I'm sure I 've ve got it wrong. Can you take it one step further and advise as to the correct syntax? Will this even work with more than one textarea field? Thank you! |
Administrative comment from seanpowell Date: 03/04/2005 06:07 am PST |
Administrative comment |
|
Hi biffsmith, You'll need to cerate a new question for this. Thanks, Sean Powell HTML page editor |
comment from presbria date: 08/10/2005 0:21 pm pdt |
comment |
|
Hey, I know this one's already solved, but I have an alternative solution that I feel is better for a few reasons. #1 It's re-usable for all text areas via one function #2 It Doesn't inform teh user that he/ she is typing too character characters, it prevents them from doing so, sort of like maxlength there's a downside: the user can see the typed character for an instand prior to the removal. here's the function: function checkmaxlength (object, maxlen) {< br> If (object. value. length> maxlen) {< br> object. value = object. value. substring (0, maxlen); }< BR >} and the implementation: </P> passing the form object and using it's methods. pretty simply and painless. |
Comment from presbria Date: 08/10/2005 0:22 PM PDT |
Comment |
|
Oh, that answered both questions too !!! I know, I'm too late, but I think it's still the best way to do it, if not, please let me know a better one. THX. |
Comment from mdmeighan Date: 08/22/2005 PM PDT |
Comment |
|
This is a little cleaner-it imposes the length limit by canceling the extra keypresses rather than using the substring () trick -- function imposemaxlength (object, maxlen) {< br> return (object. value. length <= maxlen); } Implementation: </P> </TD> </Tr> |