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.