What is the best way to emulate an HTML input "maxlength" attribute on an HTML textarea?

Solution 1:

Look at the comments on this site, with a count down. I have done it like this before, and it is simple and effective. Stack Overflow makes good use of color too.

Perhaps you don't have enough rep to see the comment box.

It runs a little countdown while you type. At it approaches a threshold, the color changes from yellow to red. All using JavaScript, and I assume the keyup event of the textarea.

EDIT: How about having it done with jQuery?

<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready( function () {
        setMaxLength();
        $("textarea.checkMax").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
    });

    function setMaxLength() {
        $("textarea.checkMax").each(function(i){
            intMax = $(this).attr("maxlength");
            $(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>");
        });
    }

    function checkMaxLength(strID){
        intCount = $("#"+strID).val().length;
        intMax = $("#"+strID).attr("maxlength");
        strID = "#"+strID+"Counter";
        $(strID).text(parseInt(intMax) - parseInt(intCount));
        if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //Good
        if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //Warning at 80%
        if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //Over
    }
</script>

And the HTML is

<textarea id="text" maxlength="250" class="checkMax"></textarea>

Solution 2:

I found a nice script here that stops the user from entering more text after the length of the input string exceeds the MaxLen parameter, it has the undeniable benefit of mostly staying out of the user's face.

My problem with that script was that it also blocked the navigation keys(arrows, home, end) along with backspace and delete, so I modified it slightly, otherwise the user couldn't delete the text he entered if he reached the limit set by MaxLen (which would be kind of hilarious :P).

Javascript:

function imposeMaxLength(Event, Object, MaxLen)
{
        return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

And the HTML that goes with it:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

The user can still get around this limitation by pasting text into the textarea, but that can be easily solved inside imposeMaxLength.

Solution 3:

PPK's Textarea Maxlength script is available on his site. Nothing fancy, just plain old JavaScript.

You can easily use this as a starting point and make changes to accommodate your CSS "notification" requirement.

Note that the author states: "The purpose of my script is not to enforce the maximum length, though it can easily be changed to do that. However, I decided to restrict my script to giving a polite reminder when the user exceeds the maximum amount of characters."

UPDATE: Due to linkrot on the attached article, here is the code that once existed on that link:

HTML:

<textarea id="text" name="text" maxlength="1250"></textarea>

JS:

function setMaxLength() {
    var x = document.getElementsByTagName('textarea');
    var counter = document.createElement('div');
    counter.className = 'counter';
    for (var i=0;i<x.length;i++) {
        if (x[i].getAttribute('maxlength')) {
            var counterClone = counter.cloneNode(true);
            counterClone.relatedElement = x[i];
            counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
            x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
            x[i].relatedElement = counterClone.getElementsByTagName('span')[0];

            x[i].onkeyup = x[i].onchange = checkMaxLength;
            x[i].onkeyup();
        }
    }
}

function checkMaxLength() {
    var maxLength = this.getAttribute('maxlength');
    var currentLength = this.value.length;
    if (currentLength > maxLength)
        this.relatedElement.className = 'toomuch';
    else
        this.relatedElement.className = '';
    this.relatedElement.firstChild.nodeValue = currentLength;
    // not innerHTML
}

Simply call the setMaxLength(); function on load.