Limit Characters in a Textarea with Prototype

Hi, Great article, I was looking for something like that for a while :).

I’m developing a web application for sending SMS messages, with this application you can send English messages (max characters per message is 160) but if you want to send a message with complicated characters (Chinese, Arabic, … etc), the max number of characters becomes 70 !!! I’m wondering how can the script be modified to do this? When you type a letter in Chinese for example the limit changes instantly to 70 ! The problem is that I don’t know Javascript I’m wondering whether hacking this script to do this is easy or not.

Thanks :)

How could I go about disabling the max allowed characters so that a user can paste in larger content and then pare it down? the way that twitter.com does it is very nice

thanks, Phillip

Terri, nice fix glad it was only a conflict with the standard meta tag description and renaming the textarea to txtdesc (or anything else for that matter as long as you edit the js file to reflect your text area name/id and as long as it isnt being called up in the head by a meta tag or other tag) sure does the trick again very nice, very slick and nice to know you are on top of it 5 out 5 wOOt

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

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
}

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.

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

Hi there! so i really loved your code :) because im a fun of prototype like you :).. i made a change to your code that i get everyone would love to have: The PROBLEM: when you changed the textarea value by javascript (lets say innerHTML=’hola amigo’) this code would not work due the lack of a CHANGE event. So when i tried CHANGE event didnt work either ’cause changing the value other way than clicking on it WILL NOT FIRE THE EVENT EITHER! the SOLUTION: just added a nice timer to it :) (a timed observer) so here is the 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]

I am using TinyMCE editor for textarea.how to limit the characters in that textarea.500 is limit for that textarea,how to limit characters for this textarea in client side.alert message after 500 characters or displaying dynamic count of characters above the text area.thanks