Question

I’ve looked around and haven’t able to find a plugin that will do exactly what I need:

1. Be usable on multiple text areas per page.
2. Have a minimum and maximum limit
3. Display characters and warnings while the user types.

Ideally, it would be nice if the plugin/function prevented/enabled the form based on the character limit.

Where can I find something a plugin with such specs?

Should I write my own? I am a complete novice in jQuery and JavaScript, so the latter option is not desirable. But I can tinker and copy code.

Answer 1

It’s easy to write such a thing…

$('textarea').keyup(function(){
    var maxsize = 1000;
    if( $(this).val().length > maxsize)
        $(element).val($(element).val().substring(0, maxsize));
});

You can also make it more generic… Just a basic example:

<textarea data-min="10" data-max="1000"></textarea>

$('textarea').keyup(function(){
    var maxsize = $(this).data('max');
    if( $(this).val().length > maxsize)
        $(element).val($(element).val().substring(0, maxsize));
});

$('textarea').blur(function(){
    var minsize = $(this).data('min');
    if( $(this).val().length < minsize)
        alert("Mininum size for this textarea is " + minsize);
});