Limiting a textarea

felonious · July 2005

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 · July 2005

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 · July 2005

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

Python · July 2005

[HTML]<input type="text" name="textfield" maxlength="250">[/HTML]

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

Chroder · July 2005

He want a textarea, not an input box

Try this one. It's quite a bit more simple.
[html]<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>[/html]

Python · August 2005

Oh yeah. Sorry. My mistake

kink · October 2005

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

kink · November 2005

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>

Howdy, Stranger!

Categories

In this Discussion

Limiting a textarea

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Limiting a textarea

Comments