It's so disappointing for user to find out that there is a character limit for textarea after he/she clicked submit button adding blog, comment or sending message.
Let's keep user informed about how many characters left. I googled for some nice "chars left" solution and found this one. Thank you, Anis Ahmad, for this neat piece of code.
After adapting original installation instructions I'm coming up with following step-by-step guide:
1. Open your /includes/js/misc.js and add core function into it:
Javascript
// character limit
function limitChars(textid, limit, infodiv)
{
var text = $('#'+textid).val();
var textlength = text.length;
if(textlength > limit)
{
$('#' + infodiv).html('You cannot write more than '+limit+' characters!');
$('#'+textid).val(text.substr(0,limit));
return false;
}
else
{
$('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
return true;
}
}
As you can see this function expects 3 parameters: id of textarea, number of allowed characters, id of information div.
2. Open .tpl file with <textarea> you want to be tuned. Let's take blog commenting as example.
So we open 'member_blog_entry.tpl and scrolling down our page to:
HTML
<textarea class="textarea textarea_full" id="field_comment_body" cols="40" rows="5" name="body">
We need to call javascript function every key up event: onkeyup="javascript:limitChars(this.id, {settings.blog_comment_max_length}, 'charlimitinfo')"
Now that part of page should look:
HTML
<textarea class="textarea textarea_full" id="field_comment_body" onkeyup="javascript:limitChars(this.id, {settings.blog_comment_max_length}, 'charlimitinfo')" cols="40" rows="5" name="body">
3. Add information bar right below text area (<dd><textarea></textarea></dd>):
You probably noticed I use global template variable instead of hardcoding limit number (ex.: 500)
Thus your textarea chars lefts will work correctly even if you change limits in your site's CP.
4. Go and try! Don't forget to hit couple times F5 button for your browser to upload new misc.js
P.S.:
There are some variables you may find useful tuning your textareas:
Text
{settings.blog_max_length}
{settings.blog_comment_max_length}
{settings.guestbook_max_length}
{settings.events_comment_max_length}
{settings.pictures_comment_max_length}
{settings.videos_comment_max_length}
{settings.news_comment_max_length}
{settings.max_message_chars}
Comments
rexi
if we put this on lets say member_blog_entry.tpl
If user edit blog after writing - counter wont count those chars we had before
chabon99
chabon99
chabon99
What do I need for the Youtube Mod if I'm using 2.5.5?
radioact
If you want me to help you give me exact situation with login details if necessary.
chabon99
radioact
Can I look at your website?
chabon99
Pages
1 2Log in to leave a comment