Ninedays Blog

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 :)

I started looking around for way to limit the length of a text area and ran intot he same old bloated js routines and the site Im developping already uses prototype so when I saw your tutorial and demo I jumped for joy. nice use of prototype and character count lightweight and uber easy to implement

Bravissimo!

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

hmmm it seems this doesnt work in IE6 or IE7 anyone found a way around it so it works in Internet exploder?

Nice version 2. I did some digging around in twitter's code and found that they count characters this way:

HTML 140/140

Javascript: function postProcessUpdateKeypress(box, e) { var val = box.value; updateStatusTextCharCounter(val); } function updateStatusTextCharCounter(value) { $('status-field-char-counter').innerHTML = 140 - value.length; if (value.length > 130) { $('status-field-char-counter').setStyle({ color: 'red' }); } else if (value.length > 120) { $('status-field-char-counter').setStyle({ color: 'orange' }); } else { $('status-field-char-counter').setStyle({ color: 'black' }); } };

** Edited by admin 4-17-2008 @3:54pm to fix formatting

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

Hi Terri!

Thanks for a nice script. Is it possible to limit and

with this method? is yes, how?

Thanks in advance...

Marc

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

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.

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
}

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