[SOLVED] Text Area remaining character counter

I've searched the forum and every term I can think of on Google but have not been able to figure out the answer.

I wish to add a javascript counter to my text areas so that the remaining characters are shown. I assume that I simply embed the javascript into my index.php or reference it via a filename - that bit is fine.

I also can see that the counter should be possible using a readonly field using a field delimiter.

The part I can't figure out is how to add the onKeyDown and onKeyUp commands to my text areas.

Thanks in advance.

You'll need to add jQuery to the page to handle this. Best I can suggest is use CB Auto Actions with a Code action and Mode set to jQuery. You'd then just supply your jQuery directly in it and it'd handle the loading of CBs jQuery library for you. You'll probably want to use the before profile edit display and before registration form display triggers so it loads on those respective pages. For information on jQuery usage please see jQuery documentation below.

docs.jquery.com/Main_Page

Thanks for the response. I had to put this on hold for a while but have just been trying to get it to work.

I've done as you said and have set up a CB Auto Actions in the way you mentioned. I found a jQuery script that meets my needs and inserted it in this action item. I then created another CB Auto Action in JS mode and inserted the script that went along with it as follows:

$(document).ready(function(){$('#cb_tasterterms').jqEasyCounter();});

where #cb_tasterterms is the ID of the field I wanted the Character Counter on. However, using Chrome developer tools I keep seeing the following in the Console:

Uncaught TypeError: Cannot call method 'jqEasyCounter' of null

which my research determined means that the variable for the field ID must not be correct (even though it is the correct ID).

I know this is slightly going outside of the bounds of CB but I hope that you might be able to point me in the right direction and that this might be useful for other users also.

Thanks.

You don't need to prepare the document, CB does that for you. You'd do just the below.

Uncaught TypeError: Cannot call method 'jqEasyCounter' of null

The jQuery function jqEasyCounter you're trying to call doesn't exist in CBs scope. CB runs in a deep noConflict and can't access functions outside of it self.

I know this is slightly going outside of the bounds of CB but I hope that you might be able to point me in the right direction and that this might be useful for other users also.

You can review GJs Wall integration where it has jQuery to do input counting without a jQuery plugin or special function.

Thanks for the points. In the end I've managed to do the following:

Use Auto Actions as instructed with the following code:

var characterLimit = 1000;


$('#remainingCharacters').html(characterLimit);

$('#myTextarea').bind('keyup', function(){
var charactersUsed = $(this).val().length;

if(charactersUsed > characterLimit){
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}

var charactersRemaining = characterLimit - charactersUsed;

$('#remainingCharacters').html(charactersRemaining);
});


Additionally I add a Fields Delimiter with the following in:

<span id="remainingCharacters"></span> characters remaining.


And that's it. The number of characters remaining are displayed and this code prevents the user from entering more than the defined number of characters.

Only issue I now have is that I will have to reproduce this multiple times for multiple fields which seems a bit messy so if you have any thoughts on how to do this better then appreciated.

Thanks again for your help so far.

Only issue I now have is that I will have to reproduce this multiple times for multiple fields which seems a bit messy so if you have any thoughts on how to do this better then appreciated.

If you adjust the selectors and append the counter directly to the fields container you can have 1 block of code that effects an unlimited amount of fields. There's no need for duplicate. Example as follows.

I didn't test it so you'll likely need to make various adjustments.