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;
}
}
}
}
I regularly use the prototype javascript library in JavaScript development (in fact, FreeTextBox4 will use it). But I've found that the $F() function doesn't work like I expect it to with radio buttons. $F() will return null if a radio is not checked and the value if it is checked. What I want it to do is figure out the value of the currently selected radio in the radio group (all with the same name). Since prototype doesn't do it, I decided to write one to do it. It will return null if none of the radios are checked and it works using either the ID of one of the radios or the name of the group. Here it is
function getRadioValue(idOrName) {
var value = null;
var element = document.getElementById(idOrName);
var radioGroupName = null;
// if null, then the id must be the radio group name
if (element == null) {
radioGroupName = idOrName;
} else {
radioGroupName = element.name;
}
if (radioGroupName == null) {
return null;
}
var radios = document.getElementsByTagName('input');
for (var i=0; i<radios.length; i++) {
var input = radios[ i ];
if (input.type == 'radio' && input.name == radioGroupName && input.checked) {
value = input.value;
break;
}
}
return value;
}