chitramahadik
asked on
set Maxlength to TextArea
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
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
ASKER
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.
That's because the textarea object does not use the "maxlength" property. It only supports the attributes: columns, rows, and name.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I assume that is an IE-only solution (Tested in Mozilla Firefox).
Neat trick tho'
Neat trick tho'
I could not make this work using IE6/javascript. Maybe I am doing something wrong.
Added the line to the css as above 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.
Added the line to the css as above 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.
I found this on the net, and it seems to fix the problems described herein:
<script language="jscript">
function LimitMultiLineLength(obj)
{
var iKey;
var eAny_Event = window.event;
iKey = eAny_Event.keyCode;
var re
re = new RegExp("\r\n","g")
x = obj.value.replace(re,"").l ength ;
if ((x >= obj.maxLength) && ((iKey > 33 && iKey < 255) || (iKey > 95 && iKey < 106)) && (iKey != 13))
{
if (obj.ErrorMessage )
{
alert(obj.ErrorMessage);
}
window.event.returnValue=f alse;
}
}
</script>
called like this:
<textarea name="name" id="name" onkeypress="LimitMultiLine Length(thi s)" onbeforepaste="LimitMultiL ineLength( this)" maxLength="255" ErrorMessage="The maximum allowance of 255 characters has been reached." style="height:108px;width: 400px;"></ textarea>
<script language="jscript">
function LimitMultiLineLength(obj)
{
var iKey;
var eAny_Event = window.event;
iKey = eAny_Event.keyCode;
var re
re = new RegExp("\r\n","g")
x = obj.value.replace(re,"").l
if ((x >= obj.maxLength) && ((iKey > 33 && iKey < 255) || (iKey > 95 && iKey < 106)) && (iKey != 13))
{
if (obj.ErrorMessage )
{
alert(obj.ErrorMessage);
}
window.event.returnValue=f
}
}
</script>
called like this:
<textarea name="name" id="name" onkeypress="LimitMultiLine
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.textarea 1.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.va lue=text1;
return;
}
text1=document.form.textar ea1.value;
}
</script>
<body>
<form>
<textarea name=textarea1 onkeydown="javascript:chec klength(80 )"></texta rea>
</form>
</body>
I think this will help u.
code for this
<script language="javascript">
var text1;
function checklength(i)
{
var txt;
txt=document.form.textarea
n=txt.length;
if (n>i) //i is the maxlength of textarea which we have set to 80
{
alert('Text overflow');
document.form.textarea1.va
return;
}
text1=document.form.textar
}
</script>
<body>
<form>
<textarea name=textarea1 onkeydown="javascript:chec
</form>
</body>
I think this will help u.
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.len gth>=maxle ngth) {
alert('Your comments must be 200 characters or less');
document.form.comments1.fo cus();
return false;
} else {
return true;
}
}
function validate1() {
maxlength=200;
if(document.form.comments2 .value.len gth>=maxle ngth) {
alert('Your comments must be 200 characters or less');
document.form.comments2.fo cus();
return false;
} else {
return true;
}
}
function validate2() {
maxlength=200;
if(document.form.comments3 .value.len gth>=maxle ngth) {
alert('Your comments must be 200 characters or less');
document.form.comments3.fo cus();
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 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!
<script language="javascript" type="text/javascript">
<!--
function validate() {
maxlength=200;
if(document.form.comments1
alert('Your comments must be 200 characters or less');
document.form.comments1.fo
return false;
} else {
return true;
}
}
function validate1() {
maxlength=200;
if(document.form.comments2
alert('Your comments must be 200 characters or less');
document.form.comments2.fo
return false;
} else {
return true;
}
}
function validate2() {
maxlength=200;
if(document.form.comments3
alert('Your comments must be 200 characters or less');
document.form.comments3.fo
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 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!
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 many 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)
{
if(Object.value.length > MaxLen)
{
Object.value = Object.value.substring(0, MaxLen);
}
}
And the implementation:
<textarea name="Responsibilities" onkeyup="CheckMaxLength(th is, 15);"><textarea>
Passing the form object and using it's methods. Pretty simply and painless.
#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 many 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)
{
if(Object.value.length > MaxLen)
{
Object.value = Object.value.substring(0, MaxLen);
}
}
And the implementation:
<textarea name="Responsibilities" onkeyup="CheckMaxLength(th
Passing the form object and using it's methods. Pretty simply and painless.
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.
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.
This is a little cleaner - it imposes the length limit by cancelling the extra keypresses rather than using the substring() trick --
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <= MaxLen);
}
Implementation:
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ><textarea>
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <= MaxLen);
}
Implementation:
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ><textarea>
<html>
<head>
<title>Category</title>
<script language="javascript" type="text/javascript">
<!--
function validate() {
maxlength=50;
if(document.myForm.theText
alert('Your comments must be 50 characters or less');
document.myForm.theTextAre
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 would be:
function validate() {
maxlength=50;
if(document.hello.goodbye.
alert('Your comments must be 50 characters or less');
document.hello.goodbye.foc
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