[code] /* Makes all textareas with a "limited" class limit the number of characters * that are allowed to be entered in it. It will update the number of chars * left in a given textarea with the [textarea.id]counter id set on it. The * number of characters it will restrict to is pulled from the title, so if * you want a 200 char limit, put something like "200 character limit" in the * title attribute (defaults to 100 if unable to parse one). */ makeTextareasLimitInput: function() { $$('textarea.limited').each(function(textarea) { var limitInput = function(event) { var element = Event.element(event), limit = parseInt(element.title) || 100; if (element.value.length >= limit) element.value = element.value.substring(0, limit); if (counter = (element.id) ? $(element.id + 'counter') : false) { var charsLeft = (limit - element.value.length); counter.update(charsLeft + ((charsLeft == 1) ? ' character ' : ' characters ') + 'left'); if (charsLeft) counter.removeClassName('max-reached'); else counter.addClassName('max-reached'); } } $w('keyup keydown blur').each(function(eventName) { textarea.observe(eventName, limitInput, false); }); }); }, [/code]

[code] /*

Title : charcount.js Author : Terri Ann Swallow URL : http://www.ninedays.org/ Project : Ninedays Blog Copyright: (c) 2008 Sam Stephenson This script is is freely distributable under the terms of an MIT-style license.

Description : Functions in relation to limiting and displaying the number of characters allowed in a textarea Version: 2.1 Changes: Added overage override. Read blog for updates: http://blog.ninedays.org/2008/01/17/limit-characters-in-a-textarea-with-prototype/

Created : 1/17/2008 - January 17, 2008 Modified : 5/20/2008 - May 20, 2008

Functions: init() Function called when the window loads to initiate and apply character counting capabilities to select textareas charCounter(id, maxlimit, limited) Function that counts the number of characters, alters the display number and the calss applied to the display number contarCaracteres(id, maxsize, limited) Function called in the init() function, sets the listeners on teh textarea nd instantiates the feedback display number if it does not exist

Modified: 1/20/2009 Author of modification: Franco Sabbatini Changes: if innerHTML is inserted with javascript then KeyUp and KeyDown would not work. Added a timer

*/ Event.observe(window, 'load', init); function init(){ contarCaracteres('txtComentario',10); }

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 + '/' + maxlimit );  

}

function contarCaracteres(id, maxsize, limited){
    if(limited == null) limited = true;
    if ($(id)){
        //new Form.Element.Observer($(id), 0.2, function(){charCounter(id, maxsize, limited);});
        Event.observe($(id), 'keyup', function(){charCounter(id, maxsize, limited);}, false);
        Event.observe($(id), 'keydown', function(){charCounter(id, maxsize, limited);}, false);
        charCounter(id,maxsize,limited);
    }
}

[/code]

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!

example:

blah blah blah blah

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

Then I’ll take a look again!

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

Good luck – feel free to repost your findings!

Thanks a load!

Knal.