Limiting a textarea [Archive]

felonious

07-11-2005, 07:00 PM

Hi everyone,

I know this is a somewhat common task, but I'm having problems with my implementation. I'm trying to write code that limits a textarea to a certain number of characters (in my case, 250). I want to do this interactively, where the user cannot type anything over 250 characters. I'm not too concerned about cut&paste at this point, though I might update the script later if it becomes a common issue.

Anyway, here's what I have for code. Any suggestions are appreciated! :)

<html>
<head>
<title>Test</title>

<script language="JavaScript" type="text/javascript">

// set up allowable characters
var reg = /(\x46|\x08|\x09)/; // backspace, delete & tab chars

// function to limit textarea to 250 characters
function ca(e) {

// set up variables
var key;
var area;

if (window.event) {
// IE
key = e.keyCode;
area = e.srcElement;

} else if (e.which) {
// netscape
key = e.which;
area = e.target;

} else {
// no event, so pass through
return true;

}

// if the length is under 250 or it's a delete, space, or tab, allow it
// otherwise, disallow
if (area.value.length < 250 || reg.test( String.fromCharCode(key)) {
return true;
} else {
return false;
}

}

</script>

</head>
<body>

<form name="form1">

<textarea name="thearea"
rows="5"
cols="30"
onKeyUp="listingsizebox.value = this.value.length;"
onKeyDown="return ca(event);"></textarea>
<br>
<input type="text" name="listingsizebox" value="0" size="4" maxlength="3" readonly>

</form>

</body>
</html>

Thanks!

-Ollie

Felix

07-30-2005, 08:27 PM

May I just add that using javascript for something like this is not always a wise idea. I could easily get round your 250 limit by merely disabling javascript in my browser settings. :\

You should always have a backup plan too such as PHP. :)

martian2k4

07-31-2005, 05:29 AM

If you use Dreamweaver then you can set the Max Char through that, Saves you coding it :p

shield

07-31-2005, 08:06 AM

<input type="text" name="textfield" maxlength="250">

Just use that as your text field... that will stop them entering more than 20 characters into the field...

Chroder

07-31-2005, 03:40 PM

He want a textarea, not an input box ;)

Try this one. It's quite a bit more simple.

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function textarea_limit(txtarea, max, chr_id)
{
if(txtarea.value.length > max)
{
txtarea.value = txtarea.value.substring(0, max);
txtarea.blur();
txtarea.focus();
return false;
}

if(chr_id && (chr = document.getElementById(chr_id)))
{
remain = max - txtarea.value.length;
if(remain < 0)
remain = 0;

chr.value = "Remaining: " + remain;
}
}
</script>
</head>
<body>

<textarea cols="80" rows="6" onblur="textarea_limit(this, 15, 'char_remain')" onkeyup="textarea_limit(this, 15, 'char_remain')"></textarea>
<input type="text" id="char_remain" style="border:none;background:#fff;" size="30" />

</body>
</html>

shield

08-01-2005, 04:52 AM

Oh yeah. Sorry. My mistake

kink

10-29-2005, 08:45 PM

how bout (if) t.a.length< 250 send
else
be nice and retype

kink

11-05-2005, 10:20 PM

thats easy try this

<HTML>
<HEAD>

<script type="text/javascript">
function afunction()
{
var ata = document.ta.l.value;
var sef = ata.length;
if(sef > 235)document.getElementById("l").style.backgroundColor="red";
if(sef > 250)alert("character limit is 250");
}
</script>
</HEAD>
<BODY>
<form name="ta">
<textarea name="l" onkeydown="afunction()"></textarea><input type="button" onclick="afunction()">
</BODY>
</HTML>