» Programming » javascript » limiter.htm

<html>
<head>
<title>Textarea limiter</title>
<script type="text/javascript">

function limiter( event, field, limit )
{
	backspace = 8;
	del = 46;
	tab = 9;
	if( !event ) event = window.event;
	key = ( event.which ? event.which : event.keyCode );
	//display_field.innerHTML += String.fromCharCode(key);

	field_text = field.value;
	if( field_text.length >= limit && key != backspace && key != del && key != tab && !( key >= 37 && key <= 40 ) )
	{
		trim_text( field, limit );
		return false;
	}
}

function trim_text( field, limit )
{
	field_text = field.value;
	if( field_text.length > limit )
	{
		field_text = field_text.substr( 0, limit );
		field.value = field_text;
	}
}

function update_limit_display( field, limit, display )
{
	display_field = document.getElementById( display );
	field_text = field.value;
	if( field_text.length == 0 ) display_field.innerHTML = "";
	else if( field_text.length >= limit ) display_field.innerHTML = "0 character(s) remaining.";
	else display_field.innerHTML = ( limit - field_text.length ) + " character(s) remaining.";
}

</script>
</head>
<body>
<div id="limit_display"></div>
<textarea name="limit_text" id="limit_text" rows="10" cols="50" onkeypress="return limiter( event, this, 400 );" onkeyup="trim_text( this, 400 ); update_limit_display( this, 400, 'limit_display' );" onchange="trim_text( this, 400 );"></textarea>
</body>
</html>
Creative Commons License
All works on this site are licensed under a Creative Commons Attribution-Share Alike 2.5 License.