Here’s a quick n’ dirty example of how to do a friendly word counter within mojoPortal using a plugin I’ve used in the past: http://themeforest.s3.amazonaws.com/67_wordCounter/index.htm. The jQuery as it is on that page needed minor alterations to work with mojo. One caveat I haven’t programmed around yet: Currently mojo prevents you from entering a css class with non-alphanumeric characters. Because my need was somewhat trivial/urgent, I just went straight to the database, and entered “count[100]” for the css class of the question (within the sts_WebFormQuestion table).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Setup</title>
<!-- Include jQuery Library -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$("[class*='count[']").each(function () {
var elClass = $(this).attr('class');
var minWords = 0;
var maxWords = 0;
var countControl = elClass.substring((elClass.indexOf('[')) + 1, elClass.lastIndexOf(']')).split(',');
if (countControl.length > 1) {
minWords = countControl[0];
maxWords = countControl[1];
} else {
maxWords = countControl[0];
}
var textarea = $(this).find('textarea').eq(0);
textarea.after('<div class="wordCount"><strong>0</strong> Words</div>');
if (minWords > 0) {
$(this).siblings('.wordCount').addClass('error');
}
textarea.bind('keyup click blur focus change paste', function () {
var numWords = jQuery.trim(textarea.val()).split(' ').length;
if (textarea.val() === '') {
numWords = 0;
}
$(this).siblings('.wordCount').children('strong').text(numWords);
if (numWords < minWords || (numWords > maxWords && maxWords != 0)) {
$(this).siblings('.wordCount').addClass('error');
} else {
$(this).siblings('.wordCount').removeClass('error');
}
});
});
});
</script>
</head>
<body>
<div class="settingrow qparagraph require count[100]">
<label for="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_txtfa584558e79e45608bd4bcadb1073c82" id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_lblfa584558e79e45608bd4bcadb1073c82" class="settinglabel">Biography (10 words)</label>
<br class="clear">
<textarea name="ctl01$mainContent$ctl00$ctlfa584558e79e45608bd4bcadb1073c82$txtfa584558e79e45608bd4bcadb1073c82" rows="7" cols="60" id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_txtfa584558e79e45608bd4bcadb1073c82"></textarea>
<span id="ctl01_mainContent_ctl00_ctlfa584558e79e45608bd4bcadb1073c82_valfa584558e79e45608bd4bcadb1073c82" style="visibility:hidden;"> *</span></div>
</body>
</html>