Textarea - how to set maximum length? 1

andycheese · Apr 25, 2003

Hi, I'd like to know how to setup a textarea in my form which can be no longer than 400 characters long (displayed as 5 lines of 80).

My code is as follows:

<textarea name="textfield" cols="80" rows="5" wrap="soft"></textarea>

Now, I would logically expect that having 5 rows of 80 columns (presumably these are equivalent to characters?) would limit the size of the textarea to 400 chars, however, it appears this is not the case. In its current form, there is no way to stop the user typing more than 400 characters (the text keeps wrapping and a scroll-bar appears on the side of the box). This results in important information being truncated when I retreive the field's contents.

Is there an attribute that I'm not using, or am I doing this incorrectly? Or do I need a script to interrogate the length of the textarea whilst a user types? If so, could a kind soul point me in the right direction?!

Any help would be greatly appreciated!

vbkris · Apr 25, 2003

does this help?
<textarea name="textfield" max="400"></textarea>

Known is handfull, Unknown is worldfull

andycheese · Apr 25, 2003

Nope! Thanks for the reply though! Maxlength="400" doesn't work either.

mwolf00 · Apr 25, 2003

Easiest solution is to do on onBlur event to check the length and alert the user.

<script>
function checkLength(){
if (document.myForm.textfield.value.length > 400){
alert("Your text is too long, it has been truncated.&quot

document.myForm.textfield.value = document.myForm.textfield.value.substr(0,400)
}
}

</script>

<form name="myForm">
<textarea name="textfield" cols="80" rows="5" wrap="soft" onBlur="checkLength()"></textarea>
</form>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rich Cook

Boomerang · Apr 25, 2003

Try this (just change "Maxlen" to your maximum lenth):

<html><head><title>textarea length</title>
<SCRIPT language="JavaScript">
<!--
function count_change(form){
Msg = form.txtarea.value;
Msglen= Msg.length;
//maximum length
MaxLen=20;
if (Msglen > MaxLen ){
form.txtarea.value=Msg.substring(0,MaxLen);
alert(MaxLen+" symbols allowed only!!&quot

} form.txtarea.focus(); }
//-->
</SCRIPT>
</head>
<BODY>
<FORM name="form1" METHOD="POST" >
<TEXTAREA cols=50 name=txtarea rows=5 MAXLENGTH=20 WRAP=virtual onChange="count_change(document.forms[0])" onkeypress="count_change(document.forms[0])"></TEXTAREA><br>
<input type=button value="show length" onclick="alert(this.form.txtarea.value.length)">
</form>
</body>
</html>

If you don't want the buttton to show the length you can change:

<input type=button value="show length" onclick="alert(this.form.txtarea.value.length)">

to:

<input type=button value="your own button text">

Hope this helps,
Erik

<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->

andycheese · Apr 25, 2003

Cheers Boomarang/Erik! That's exactly what I was looking for.

xutopia · Apr 25, 2003

I have one way of dealing with the problem that could be interesting for some people as it uses visual channels to help usubility. All this using onkeypress.

<form onsubmit="var tArea = document.getElementById('tArea'); var max = tArea.getAttribute('maxlength'); if (tArea.value.length > max){ alert('The amount of characters in the textarea is limited to ' + max + ' characters\nPlease truncate your message'); tArea.focus(); return false } ">

<input type="text" value="100" size="3" id="charsLeft">Characters left.

<br>

<textarea id="tArea" maxlength="100" onkeypress="var len = this.value.length; var max = this.getAttribute('maxlength'); document.getElementById('charsLeft').value = max - len; return (len < max)"></textarea>

<input type="submit" value="submit">
</form>

Gary

http://www.xutopia.com

Haran
==========================

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Textarea - how to set maximum length? 1

andycheese

Programmer

vbkris

Programmer

andycheese

Programmer

mwolf00

Programmer

Boomerang

Programmer

andycheese

Programmer

xutopia

Programmer

Similar threads

Part and Inventory Search

Sponsor