Character Counter

Requirements

Forum Version : Any
Other : You must be using one of the following text editors :

• Default SCEditor
  
• Textarea with the ID text_editor_textarea
  
• None of the above ? You must modify it yourself, or request a modification !
  

Introduction

The purpose of this small plugin is to calculate the amount of characters you've typed + the characters that are remaining. If you exceed the character limit, you're most likely to receive a "Your post is too long" message. The goal is to keep you aware of your character count as you type.


By default the following limits are set in place on every forum :

Signature : limit of 1,000 characters
Messages / PMs : limit of 60,000 characters ( this may vary across different forums )

Exceeding these limits may give you the aforementioned error message.

Installation

The installation is extremely simple ! Go to Administration Panel > Modules > JavaScript Codes management

New ? If so, ensure that JS codes management is enabled by choosing "Yes." Otherwise, proceed to creating a new script with the following settings :

Title : Character counter
Placement : In all the pages
Paste the following script :

Code:

$(function() {
  if (!document.getElementById('text_editor_textarea')) return; // no textarea ? better not continue :(
 
  // define global data to be cached and reused
  window.$fa_char = {
    area : document.getElementById('text_editor_textarea'), // message textarea
    current : 0, // current characters typed
    maximum : /page_profil=signature/.test(window.location.search) ? 1000 : 60000, // maximum characters allowed
    used : null, // node cache for used characters
    remain : null, // node cache for remaining characters
    instance : null, // sceditor instance
 
    // calculate the characters used and remaining
    calculate : function() {
      $fa_char.current = ($fa_char.instance ? $fa_char.instance.val() : $fa_char.area.value).length; // get the message length
      $fa_char.used.innerHTML = $fa_char.current; // update the current count
      $fa_char.remain.innerHTML = '<span ' + ($fa_char.current >= $fa_char.maximum ? 'style="color:#F00"' : '') + '>' + ($fa_char.maximum - $fa_char.current) + '</span>'; // update the remaining characters
    }
  };
 
  var node = document.createElement('DIV'); // container for the chararacter data
 
  node.id = 'faCharCounter'; // the id is mostly used for user defined styles
  node.innerHTML = '<span id="faCharUsed">0</span> characters used out of ' + $fa_char.maximum + ' (<span id="faCharRemain" style="color:#090">' + $fa_char.maximum + '</span> remaining)'; // define our character data
  $fa_char.area.parentNode.insertBefore(node, $fa_char.area); // insert the container before the textarea
 
  // update the node caches so we don't have to keep getting these elements
  $fa_char.used = document.getElementById('faCharUsed');
  $fa_char.remain = document.getElementById('faCharRemain');
 
  // execute another doc ready to match up with the sceditor
  $(function() {
 
    // depending if the sceditor is present, one of these events will be attached
    if ($.sceditor) {
      var container = $('.sceditor-container');
      $fa_char.instance = $($fa_char.area).sceditor('instance');
      $('textarea', container)[0].oninput = $fa_char.calculate; // source
      $('iframe', container).contents()[0].body.oninput = $fa_char.calculate; // wysiwyg
    } else $fa_char.area.oninput = $fa_char.calculate;
 
    $fa_char.calculate(); // get the current character count on page load
  });
});

Modifications

1. Maybe the character limit is different for your forum and you need to change it ? All you need to do is replace 60000 in the script with your limit !
   
   
2. Don't like the wording or need to translate it ? Find the following snippet and change it to your heart's content !
   

   Code:

   node.innerHTML = '<span id="faCharUsed">0</span> characters used out of ' + $fa_char.maximum + ' (<span id="faCharRemain" style="color:#090">' + $fa_char.maximum + '</span> remaining)';

   
   
3. Need a more stylish counter ? Never fear ! There's CSS selectors here !
   
   • #faCharCounter : The main container for the character data
     
   • #faCharUsed : The total amount of characters used
     
   • #faCharRemain : The total amount of characters remaining
     

Even more selectors can be added simply by modifying the data in modification 2 !

Technical

The script creates a global object -- $fa_char -- to hold data, but also cache it for reuse so some conditions and traversal don't have to reoccur. It includes one method, calculate(), which can be used to update the character count. This method is executed every time the user lifts a key.


The instance is mainly used to execute methods of the SCEditor. Otherwise, you should use area to access the value if you're not using the SCEditor. ( $fa_char.area.value )

Closing

If you have any questions or encounter any problems, please feel free to leave a reply. However, please ensure that you provide sufficient information so that I may answer your questions swiftly.

Suggestions are always welcomed, of course.

+1 for you.

I think that reaching 60000 characters in the article is not regular, so, it should be hidden. The notice should only appear when users write over 59000 characters.

You only tracking keyup event, if users paste or cut text by selection on the contextmenu, your code will not work properly.

Code:

// Update in WYSIWYG mode
$fa_char.instance.bind('nodeChanged focus blur keyup contextmenu', function() {
    $fa_char.calculate();
});

// Update in BBcode mode
$('.sceditor-container').on('input', 'textarea', function() {
    $fa_char.calculate();
});

Question. In regards to the requirements section. Is the "default" already provided with a forum? Or is it something to be downloaded? If not, then this can otherwise be inputted as a javascript page and function correctly, yes?

#Zzbaivong Does the code you posted fix that issue?

Zzbaivong wrote:+1 for you.

I think that reaching 60000 characters in the article is not regular, so, it should be hidden. The notice should only appear when users write over 59000 characters.

You only tracking keyup event, if users paste or cut text by selection on the contextmenu, your code will not work properly.

Code:

// Update in WYSIWYG mode
$fa_char.instance.bind('nodeChanged focus blur keyup contextmenu', function() {
    $fa_char.calculate();
});

// Update in BBcode mode
$('.sceditor-container').on('input', 'textarea', function() {
    $fa_char.calculate();
});

That can be modified under modification 2, although further modifications will need to be made to the calculation method if you want it to display after the limit is reached.

You're true about only utilizing keyup as it will have limited range for listening to user input. I went ahead and changed keyup to oninput so it should be more flexible.

Code:

$('textarea', container)[0].oninput = $fa_char.calculate; // source
$('iframe', container).contents()[0].body.oninput = $fa_char.calculate; // wysiwyg

I also fixed a small bug I missed for regular textareas.

Kudos

Eden Alexandria wrote:Question. In regards to the requirements section. Is the "default" already provided with a forum? Or is it something to be downloaded? If not, then this can otherwise be inputted as a javascript page and function correctly, yes?

#Zzbaivong Does the code you posted fix that issue?

Yes ! It's the editor we're using here, and it's default on all forums. In short; this will work for anyone using the default editor..

The problem Zzbaivong mentioned should be fixed now. ^^

How...! Nice code Ange. Thanks by shared.

Is there a way to change the color of the words or is it stuck the way it is? I'm hoping to make the (6000) portion a purple color to go along with a site's theme o.o

Hi @The Awakened,

Under modifications see number 2. There will be an HTML string like this :

Code:

node.innerHTML = '<span id="faCharUsed">0</span> characters used out of ' + $fa_char.maximum + ' (<span id="faCharRemain" style="color:#090">' + $fa_char.maximum + '</span> remaining)';

Change

Code: #090

( which translates to green ) to whatever color you want.

Hai. How can I check the max. character in both signature and forum?