Mood Swing » Nostalgic

Journal » Post

pngfix
posted in: code at 02:42 am
0 Reactions

I was fixing a bug on the guestbook section earlier and decided to add the maxlength attribute to the form. When I tried to validate the code using the XHTML 1.0 Transitional specs it had 1 error. It seems the textarea input field doesn't support the maxlength attribute. For the sake of security I decided to implement a JavaScript solution after seeing a similar implementation on QuirksBlog. I got the concept from that tutorial and expanded on the idea.

The requirements of the script I made were simple: to be unobtrusive, must validate in XHTML 1.0 Transitional, and be modular. The example at QuirksBlog had several limitations such as: it will not validate since it still relied on using the maxlength attribute within the textarea tag itself, and it will not deny input if it has passed the set maxlength value. So to make the long story short I'll show you my code.

 
function setMaxLength() {
    var txtareas = document.getElementsByTagName('textarea');
    var maxlength = 0;
    var counter = document.createElement('div');

    for (var i = 0, txtarea; txtarea = txtareas[i] ;i++) {
        if (txtarea.className.search(/ml-([0-9]+)/)) {
            //get our max length
            maxlength = txtarea.className.match(/ml-([0-9]+)/)[1];
            var counterClone = counter.cloneNode(true);

            counterClone.className = "counter"; //set the style for our counter
            counterClone.innerHTML = "text limit : " + maxlength;

            txtarea.parentNode.insertBefore(counterClone,txtarea.nextSibling);
            txtarea.setAttribute("maxlen",maxlength);
            txtarea.setAttribute("chars",1); //marker for the current chars remaining
            txtarea.counter = counterClone; 

            //events
            txtarea.onkeyup = txtarea.onchange = function(e) {
                var chars = this.getAttribute('maxlen') - this.value.length;
                this.setAttribute("chars",chars);
                this.counter.innerHTML = "text limit : " + chars;
            }
            txtarea.onkeydown = function(e) {
                var evt = (e) ? e : window.event;
                var charCode = (evt.which) ? evt.which : event.keyCode;

                if (this.getAttribute('chars') < 1) {
                    if (charCode != 8 && charCode != 46) { //accept the del/back space keys
                        //make sure we have the exact maxlength even if the user
                        //is typing really fast
                        this.value = this.value.substring(0,this.getAttribute('maxlen'));
                        return false; 
                    }
                }
            }
            txtarea.onkeyup();
        }
    }
}
 

What this basically does is loop through all the textarea tags and searches for the ml-(number) class name. For example, you want to set the maxlength of a particular textarea to 500 characters, you would add ml-500 to that textarea class attribute, where ml- would be the marker for the script and 500 the actual maxlength limit. This way we just append values to the class attribute so that the code will still validate. This will not affect any style/class you already have for that textarea, you would just separate them with spaces like so:

 
<textarea name="mytextbox" cols="40" rows="8" class="myOwnStyle ml-500"></textarea>
 

To see this in action, just copy and paste the code and call the setMaxLength function on the window.onload event. I tested this on the following browsers:

  • Firefox 2.x
  • Internet Explorer 6
  • Internet Explorer 7
  • Opera 9.21

Talkback

No reactions

Post a reaction



 


*Enter the characters displayed on the image below on the verify image text box above. Note that this is case sensitive.

captcha image

 
Back to top
contact