Although HTML is very clever (and there are lots of very clever things hidden if you go looking) there's one thing that's bugged me since I first started putting forms together in a webpage.
Why is there a maxlenth parameter on an <input type="text"....> field but no maxlength attribute on a <textarea....>....</textarea>
Now I know it's possible to write some javascript and attach it to a text area that you want and control user input that way. But it requires thought and effort and it's not a very elegant solution.
But, as you can see... the problem can be solved:
I came across the concept of CSS behaviours (or is that behaviors) thanks to a really handy script 'behaviours.js' from Ben Nolan which allows you to assign a behaviour to a CSS rule. I then applied that to allow me to add a couple of extra attributes to the Textarea HTML tag. Specifically the Maxlength and showremain function. Adding them to a page is as easy as this (the hardest bit it to remember to include the two scripts!)
<html><head><script type="text/javascript" src="/scripts/behaviour.js"></script><script type="text/javascript" src="/scripts/textarea_maxlen.js"></script></head><body><p>Limit 120 Characters: <TEXTAREA rows="5" cols="30" maxlength="120" showremain="limitOne"></TEXTAREA> <br>Chars Remaining:<span id="limitOne">--</span></p><p>Limit 50 Characters: <TEXTAREA rows="2" cols="30" maxlength="50" showremain="limitTwo"></TEXTAREA> <br>Chars Remaining:<span id="limitTwo">--</span></p></body></html>
The logic to check the length of the selected object, enforce it and (if required) update the span showing the remaining characters is within the textarea_maxlen script. It registers functions against the onkeydown, onkeyup, onpaste and onblur methods for the CSS textarea attribute.
var CSSrules = {
'textarea' : function(element){
element.onkeydown = function(event){
return doKeyPress(element,event);
}
,
element.onpaste = function(){
return doPaste(element);
}
,
element.onkeyup = function(){
return doKeyUp(element);
}
,
element.onblur = function(){
return doKeyUp(element);
}
}
}
Behaviour.register(CSSrules);
the actual javascript to check and enforce the length and update the progress is all pretty standard stuff - in fact, it's probably not that elegant but it was more a case of getting it working in a hurry and having it work in IE (PC), FireFox (PC, OSX and Ubuntu) and Safari (OSX) - the test platforms for the project (if you can tidy it up, please leave a comment here!) The biggest problem I encountered was the different event handling models for IE and Gecko based browsers - both in when events were triggered and how to stop them bubbling further!
var detect = navigator.userAgent.toLowerCase();// Keep user from entering more than maxLength characters
function doKeyPress(obj,evt){
maxLength = obj.getAttribute("maxlength");
var e = window.event ? event.keyCode : evt.which;
if ( (e == 32) || (e == 13) || (e > 47)) { //IE
if (maxLength && (obj.value.length > maxLength-1)) {
if (window.event) {
window.event.returnValue = null;
} else {
evt.cancelDefault;
return false;
}
}
}
}
function doKeyUp(obj){
maxLength = obj.getAttribute("maxlength");
if (maxLength && obj.value.length > maxLength){
obj.value = obj.value.substr(0,maxLength);
}
sr = obj.getAttribute("showremain");
if (sr) {
document.getElementById(sr).innerHTML = maxLength-obj.value.length;
}
}
// Cancel default behavior and create a new paste routine
function doPaste(obj){maxLength = obj.getAttribute("maxlength");
if (maxLength){
if ((window.event) && (detect.indexOf("safari") + 1 == 0)) { //IE
var oTR = obj.document.selection.createRange();
var iInsertLength = maxLength - obj.value.length + oTR.text.length;
try {
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
oTR.text = sData;
}
catch (err) {
}
if (window.event) { //IE
window.event.returnValue = null;
} else {
//not IE
obj.value = obj.value.substr(0,maxLength);
return false;
}
}
}
}
In order for this to work in your own page remember: you must go and download the behaviour.js file from Bens site, and the textarea_maxlen.js script from here.
With a bit more imagination and time you could extend this to enforce rules like MaxLength="500" MaxWords="150" to lock down how much data can be entered, or MaxCaps="15%" to stop them SHOUTING.
The maxlength attribute is part of a proposed HTML5 standard, but it'll be interesting to see if we ever get there with the directions devolving to XHTML and microformats an rich internet application technologies such as Silverlight.