Home > Others

Set maxlength to textarea

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20781420.html

Hi
I am using textarea type. I want to set maximum length to the textarea.
I am using following code for the same, but it is not working,
<Textarea name = "txtdescription" Cols = 10 rows = 3 maxlength = 50> </textarea>
But it is not working, it takes chars beyond 50 also.
Help me inthe same

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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
textarea set value set value of textarea html javascript textarea focus set cursor position php convert textarea to html how to get textarea value how to create textarea in html how to write textarea in html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More