How to impose maxlength on textArea in HTML using JavaScript

window.onload = function() {   var txts = document.getElementsByTagName('TEXTAREA');   for(var i = 0, l = txts.length; i < l; i++) {    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {       var func = function() {         var len = parseInt(this.getAttribute("maxlength"), 10);         if(this.value.length > len) {           alert('Maximum length exceeded: ' + len);           this.value = this.value.substr(0, len);           return false;         }       }      txts[i].onkeyup = func;      txts[i].onblur = func;    }   };}

I know you want to avoid jQuery, but as the solution requires JavaScript, this solution (using jQuery 1.4) is the most consise and robust.

Inspired by, but an improvement over Dana Woodman's answer:

Changes from that answer are: Simplified and more generic, using jQuery.live and also not setting val if length is OK (leads to working arrow-keys in IE, and noticable speedup in IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:$('textarea[maxlength]').live('keyup blur', function() {    // Store the maxlength and value of the field.    var maxlength = $(this).attr('maxlength');    var val = $(this).val();    // Trim the field if it has content over the maxlength.    if (val.length > maxlength) {        $(this).val(val.slice(0, maxlength));    }});

EDIT: Updated version for jQuery 1.7+, using on instead of live

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:$('textarea[maxlength]').on('keyup blur', function() {    // Store the maxlength and value of the field.    var maxlength = $(this).attr('maxlength');    var val = $(this).val();    // Trim the field if it has content over the maxlength.    if (val.length > maxlength) {        $(this).val(val.slice(0, maxlength));    }});

Update Use Eirik's solution using .live() instead as it is a bit more robust.

Even though you wanted a solution that wasn't using jQuery, I thought I'd add one in for anyone finding this page via Google and looking for a jQuery-esque solution:

$(function() {            // Get all textareas that have a "maxlength" property.    $('textarea[maxlength]').each(function() {        // Store the jQuery object to be more efficient...        var $textarea = $(this);        // Store the maxlength and value of the field.        var maxlength = $textarea.attr('maxlength');        var val = $textarea.val();        // Trim the field if it has content over the maxlength.        $textarea.val(val.slice(0, maxlength));        // Bind the trimming behavior to the "keyup" event.        $textarea.bind('keyup', function() {            $textarea.val($textarea.val().slice(0, maxlength));        });    });});

Hope that is useful to you Googlers out there...