PDA

View Full Version : how to limit the characters in textarea



jennypretty
Mar 16th, 2007, 03:30 PM
Hello,

I created some textarea boxes and want to limit the maxlength to be to 255 characters. I 'd like to use ONLY one function that applies to al textarea boxes.

<textarea rows="3" cols="55" name="abc" id="input" /></textarea>

Is there any way to do with javascript? I will trim off when users reach the maxlength.

I searched on this forum for the same topic, and found some topics talk about this but not exactly what I wanted.

Thanks.

shyam
Mar 16th, 2007, 07:00 PM
add a keyup/down handler to the textarea and substring :)

jennypretty
Mar 16th, 2007, 07:12 PM
This is what I tried but don't work (this code from this forum)
<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
{field.value = field.value.substring(0, maxlimit);}
else
{countfield.value = maxlimit - field.value.length;}
}
</script>

<textarea rows="3" cols="55" maxlength="255" name="abc" id="input" onKeyDown="textCounter(this.form.input);" onKeyUp="textCounter(this.form.A;" ></textarea>

I like to have text trim off when if goes over 255. And, I dont' want the Input box to show the remaining characters...

Can anyone help please?

thanks.

coothead
Mar 16th, 2007, 07:22 PM
Hi there jennypretty,

have a look at this example. it may suit your requirements...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var ta=document.getElementsByTagName('textarea');
var max=5;
var temp=new Array();
window.onload=function() {
for(c=0;c<ta.length;c++) {
ta[c].id=c;
ta[c].onkeyup=function() {

if(this.value.length==max) {
alert('please note that the maximum number of characters and spaces allowed is... '+max);
temp[this.id]=this.value;
}
if(this.value.length>max) {
this.value=temp[this.id];
}
}
}
}
</script>

</head>
<body>

<div>
<textarea rows="3" cols="55" name="abc"></textarea><br />
<textarea rows="3" cols="55" name="def"></textarea><br />
<textarea rows="3" cols="55" name="ghi"></textarea>
</div>

</body>
</html>
Just change the var max=5 to 255. ;)

coothead

Kor
Mar 16th, 2007, 07:28 PM
I would have used a code based on Regular Expressions. And I would have used both onkeyup and onblur (as the user might use the mouse's copy/paste to fill the textarea.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var maxChar=5;
function limit(obj){
while(obj.value.length>maxChar){
obj.value=obj.value.replace(/.$/,'');//removes the last character
}
}
</script>
</head>
<body>
<form>
<textarea onkeyup="limit(this)" onblur="limit(this)"></textarea>
</form>
</body>
</html>

jennypretty
Mar 16th, 2007, 07:30 PM
I had a js to check empty fields already, if I create a 2nd js, it does not work. Can I put this function on the 1st js block?
thanks.

Kor
Mar 16th, 2007, 07:33 PM
I had a js to check empty fields already, if I create a 2nd js, it does not work. Can I put this function on the 1st js block?
thanks.
You are talking to whom? coothead or me?

My code works. What can I say more?

glenngv
Mar 16th, 2007, 07:35 PM
Take note that when the user paste something to the textbox, onkeydown or onkeyup is not fired. So you should also call the function onblur.

EDIT. I didn't see Kor's post when I posted this.

jennypretty
Mar 16th, 2007, 07:44 PM
Kor, it worked great. Short code and worked great.
Woh, big thanks.