Today morning I decided to improve vldCrowd user experience and then share my findings.
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:
- Code: Select all
// 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:
- Code: Select all
<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:
- Code: Select all
<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>):
- Code: Select all
<dd id="charlimitinfo">You have {settings.blog_comment_max_length} characters left.</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:
- Code: Select all
{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}
you can read the originalpost from vldcrowd
