Limit the length of a textarea with jQuery.

HTML

<textarea id="tweet" cols="36" rows="4"></textarea>
<div id="counter"></div>

CSS

#tweet {
    margin-top: 10px;
    margin-left: 10px;
}

#counter {
    padding-left: 10px;
}

JavaScript

var textarea = $('textarea')[0];
var $counter = $('#counter');
var limit = 5;

$(textarea).keydown(function(event) {
    switch (event.keyCode) {
    case 8:
        // backspace
    case 46:
        // forward delete
    case 37:
        // left arrow
    case 38:
        // up arrow
    case 39:
        // right arrow
    case 40:
        // down arrow
    case 86:
        // v (as in ctrl-v or command-v)
        break;
    default:
        if (this.value.length == limit) {
            event.preventDefault();
        }
    }
});

$(textarea).on('paste', function() {
    setTimeout(function() {
        if (textarea.value.length > limit) {
            textarea.value = textarea.value.substr(0, limit);
            displayLength();
        }
    }, 600);
});

$(textarea).keyup(displayLength);

function displayLength() {
    if (textarea.value.length > limit) {
        $counter.text("Too long!");
    } else {
        $counter.text(limit - textarea.value.length);
    }
}

displayLength();