Character Counter
+2
Zzbaivong
Ange Tuteur
6 posters
Page 1 of 1
Character Counter
Requirements
Forum Version : AnyOther : 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 managementNew ? 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
- 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 !
- 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)';
- 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.
Last edited by Ange Tuteur on June 28th 2015, 3:43 am; edited 2 times in total
Re: Character Counter
+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.
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();
});
Re: Character Counter
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 Does the code you posted fix that issue?
Re: Character Counter
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
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..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?
The problem Zzbaivong mentioned should be fixed now. ^^
( The script in the first post is updated )
Re: Character Counter
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
Re: Character Counter
Hi @The Awakened,
Under modifications see number 2. There will be an HTML string like this :
Change
( which translates to green ) to whatever color you want.
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
|
Similar topics
» Character Counter not adding to actual editor
» Typing field problem - Character Counter Confliction
» Profile View Counter & Website View Counter
» How do i add a web counter
» Need an avatar for my one character
» Typing field problem - Character Counter Confliction
» Profile View Counter & Website View Counter
» How do i add a web counter
» Need an avatar for my one character
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum