Comments on: Limit Characters in a Textarea with Prototype

By: Knal

Knal — Mon, 01 Dec 2008 22:48:58 +0000

Ok, thanks.

The simplified form looks like this:

<form id="contactform" action="contact.php" method="post">
    <label for="msg">Message</label>: <span>(<span id="counter-msg"><b>300</b></span> Chars)</span>     
    <textarea name="msg" id="msg" cols="40" rows="4"></textarea>
    <input type="submit" value="Submit" />
    <input type="reset" id="resetform" name="Reset" value="Reset" />
</form>

The javascript looks like this:

var valid = new Validation( 'contactform', { immediate : false, onFormValidate : HandleForm });
Validation.addAllThese([ ['msg', 'Bitte, Foobar', { minLength : 3, maxLength : 100, include : ['required'] }] ]);
$('resetform').observe('click', function (){ valid.reset(); init(); });

Thanks again for your help!

By: Terri Ann

Terri Ann — Mon, 01 Dec 2008 22:13:35 +0000

When you submit your code use your preferred code edito to tab in the content you want to display as code and leave an empty line between your comments and code.

example:

blah blah blah blah

[tab] code code code [tab] code code code

Then I'll take a look again!

By: Knal

Knal — Mon, 01 Dec 2008 17:51:11 +0000

Apparently my form in my comment was filtered out...

By: Knal

Knal — Mon, 01 Dec 2008 17:50:05 +0000

I've aded the init();, but it only works if i click twice. My simplified code looks like this:

var valid = new Validation( 'contactform', { immediate : false, onFormValidate : HandleForm });

Validation.addAllThese([ ['msg', 'Bitte, Foobar', { minLength : 3, maxLength : 100, include : ['required'] }] ]);

$('resetform').observe('click', function (){ valid.reset(); init(); });

Hope you can help.

Thanks, Knal

By: Terri Ann

Terri Ann — Mon, 01 Dec 2008 03:07:42 +0000

Best suggestion would be to add a trigger using the really easy validation, or call the makeItCount() or init() onreset.

Good luck - feel free to repost your findings!

By: Knal

Knal — Sat, 29 Nov 2008 17:00:35 +0000

I have combined this functionality with the Really Easy validation and coma across a small problem: If i reset a form (), the counter does not reset since it isn't triggered. Any ideas?

Thanks a load!

Knal.

By: Mark McKay

Mark McKay — Thu, 17 Jul 2008 01:18:33 +0000

Great script.

If you place the containing the remaining characters in the Label your approach will be more accessible to screen readers as they only speak labels when in forms mode.

i.e.

Description (0/300 characters)

Mark

By: Milos

Milos — Wed, 16 Jul 2008 06:36:33 +0000

Hello! according to Phillips post I have updatet your script to output a message or to color the letters when a maximum limit of letters is reached.

function charCounter(id, maxlimit, limited){
    if (!$('counter-'+id)){
        $(id).insert({after: '<div id="counter-'+id+'"></div>'});
    }
    if($F(id).length >= maxlimit){
        if(limited){    $(id).value = $F(id).substring(0, maxlimit); }
        $('counter-'+id).addClassName('charcount-limit');
        $('counter-'+id).removeClassName('charcount-safe');
    } else {    
        $('counter-'+id).removeClassName('charcount-limit');
        $('counter-'+id).addClassName('charcount-safe');
    }
    $('counter-'+id).update( $F(id).length + ' von ' + maxlimit );
    // here is the updated Code START
    if ($F(id).length > 25) {
    // do here what ever you want if the limit is reached
    alert("Maximum letters are reached. ...");
    }
    // here is the updated Code END
}

By: Paolo Gabrielli

Paolo Gabrielli — Thu, 10 Jul 2008 17:45:08 +0000

Thanks for your code. Just a line to ask your help: if I (copy &) paste into the textarea the field is not updated. I searched around the net but I haven't find anything. The only solution that I came with is to use new

Form.Element.Observer($(id), 0.5, function(){charCounter(id, maxsize, limited);})

instead of the 2 Event.observe. Every 500ms it check if the textarea is changed and even if you copy&paste it updates the counter. Many thanks, P.

By: Marc Falk

Marc Falk — Wed, 18 Jun 2008 02:49:49 +0000

Ah crap, hadn't noticed that html tags was allowed here. They used to be forbidden with a big F! :P

Anyway , I wanted to know if you could limit other elements, like div, span and p with your script... and I've actually found a way to do it now with the prototype truncate string.

At the moment I'm just using:

Script: $('truncate').update($('truncate').innerHTML.truncate(10))

Content: </span

And it works.. but do you think it can be done in a smarter/faster way?

this guy does it in a very different way, but it doesn't work here :/

Anyway, take care :) Marc