I wrote a little prototype class for limiting the number of characters in a <textarea>. It also includes a counter if you want. You set the ID of the <textarea>, the ID of the <input> where the number of characters will be reported, and the number of characters. There is also an internal flag for whether or not to include carriage returns (\n or \r) in the count. Here's how to instantiate it:
<textarea id="textarea1" rows="5" cols="57"></textarea>
<br />
<input type="text" id="remaining" size="9" /> characters remaining
<script type="text/javascript">
var t1 = new TextCounter('textarea1', 'remaining', 150);
</script>
And here's the full script:
var TextCounter = Class.create();
TextCounter.prototype = {
initialize: function(textareaid, inputid, maxLength) {
this.maxLength = maxLength;
this.textarea = $(textareaid);
this.input = $(inputid);
this.input.value = maxLength;
this.input.readonly = true;
this.input.disabled = true;
Event.observe(this.textarea, 'keyup', this.checkChars.bindAsEventListener(this));
Event.observe(this.textarea, 'keydown', this.checkChars.bindAsEventListener(this));
this.checkChars();
},
checkChars: function(e) {
var includeBreaksInCount = false; // false = don't count a return (\r or \n) in the count.
var charCount = this.textarea.value.length;
var breaks = 0;
if (!includeBreaksInCount) {
var lines = this.textarea.value.split('\n');
breaks = lines.length;
// check for /r at the end of the lines (IE)
for (var i=0; i<lines.length; i++) {
var line = lines[ i ];
if (line.charCodeAt(line.length-1) == 13)
breaks++;
}
}
// check if over limit
if ((charCount-breaks) > this.maxLength) {
this.textarea.value = this.textarea.value.substring(0, (this.maxLength + breaks) );
}
// update counter
if (this.input) {
if ((charCount-breaks) > this.maxLength) {
this.input.value = 0;
} else {
this.input.value = (this.maxLength + breaks) - charCount;
}
}
}
}