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).innerText = 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 WPF/E.