The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Character Counter

View previous topic View next topic Go down

Character Counter

Post by Ange Tuteur on June 26th 2015, 8:37 pm

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. Wink


Last edited by Ange Tuteur on June 28th 2015, 3:43 am; edited 2 times in total

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Character Counter

Post by Zzbaivong on June 27th 2015, 5:38 pm

+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();
});

Zzbaivong
Forumember

Posts : 95
Reputation : 47
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Character Counter

Post by Eden Alexandria on June 28th 2015, 2:56 am

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?

Eden Alexandria
Forumember

Female Posts : 36
Reputation : 1
Language : English

http://www.narutolegacy.com/

Back to top Go down

Re: Character Counter

Post by Ange Tuteur on June 28th 2015, 3:51 am

@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 Mr. Green

@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.. Smile

The problem Zzbaivong mentioned should be fixed now. ^^


( The script in the first post is updated )

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Character Counter

Post by Shek Crowley on September 2nd 2015, 4:43 pm

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

Shek Crowley
Active Poster

Male Posts : 1194
Reputation : 35
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Re: Character Counter

Post by The Awakened on January 26th 2016, 4:15 am

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

The Awakened
Forumember

Posts : 102
Reputation : 9
Language : English, Spanish, and French

http://www.fairytailhaven.forumotion.com

Back to top Go down

Re: Character Counter

Post by Ange Tuteur on January 26th 2016, 4:19 pm

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. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum