VERSION 0.3.0 IS OUT (SEE ABOVE) AND VERSION 0.4.0 TO BE RELEASED SOON

To address the usability issue with truncation raised by Rulatir, I am replacing the truncate option with a new option called validate. By default validate option is true. If true, the plugin will disable the submit button if any of the fields’ character limit has been exceeded. Here is a sneak peek at the code so far. Also note the other new option, warningThreshold, regarding the number of characters to set a warning class on the indicator. The new code will have pass, warning and fail states to set a class on the indicator, which lets you mimic Twitter’s appoarch of changing the text color from green, to orange, to red.

/**
*
*
* SNEAK PEEK – FINAL 0.4.0 VERSION TO BE RELEASED SOON.
*
*
*
* maxChar jQuery plugin
* @author Mitch Wilson
* @version 0.4.0 (NOT FINAL – SNEAK PEEK)
* @requires jQuery 1.3.2 (only version tested)
* @see http://mitchwilson.net/maxchar/
* @param {Boolean} debug Specify whether to send message updates to the Firebug console. Default is false.
* @param {String} indicator Specify alternate indicator element by id. Default is indicator created dynamically.
* @param {String} label Specify a default label displayed when input element is not in focus. Default is blank.
* @param {String} pluralMessage Set the plural form of the remaining count message. Default is ‘ remaining’.
* @param {Number} rate Set the update rate in milliseconds. Default is 200.
* @param {String} singularMessage Set the singular form of the remaining count message. Default is ‘ remaining’.
* @param {String} spaceBeforeMessage Set spacing in front of (to the left of) the indicator message. Default is ‘ ‘.
* @param {Boolean} validate Whether to perform limit validation and enable/disable form submission. Default is true.
* @param {Number} warningThreshold The character count to set the warning CSS class on the indicator. Default is 10.
* @description Enforces max character limit on any input or textarea HTML element and provides user feedback and many options.
* New features added in 0.4.0 are:
* 1) Feature change: Option truncate removed due to usability concerns.
* 2) New Feature: Form submit button disabled when over limit. Plugin automatically finds the submit button in the parent form.
* 3) New Feature: pass, warning and fail states for the indicator. Sets CSS classes limit_pass, limit_warn or limit_fail.
*/

(function($){

$.fn.maxChar = function(limit, options) {

// Define default settings and override w/ options.
settings = jQuery.extend({
debug: false,
indicator: ‘indicator’,
label: ”,
pluralMessage:’ remaining’,
rate: 200,
singularMessage: ‘ remaining’,
spaceBeforeMessage: ‘ ‘,
validate: true,
warningThreshold: 10
}, options);

// Get maxChar target element.
var target = $(this); // Must get target first, since it is used in setting other local variables.

// Get settings.
var debug = settings.debug;
var indicatorId = settings.indicator;
var label = settings.label;
var pluralMessage = settings.pluralMessage;
var rate = settings.rate;
var singularMessage = settings.singularMessage;
var spaceBeforeMessage = settings.spaceBeforeMessage;
var validate = settings.validate;
var warningThreshold = settings.warningThreshold;

// Set additional local variables.
var currentMessage = ”; // Current message to display to the user.
var indicator = getIndicator(indicatorId); // Element to display count, messages and label.
var limit = limit; // Character limit.
var remaining = limit; // Characters remaining.
var timer = null; // Timer to run update.
var parent_form = $(this).closest(”form”);
var submit_button = parent_form.find(’input[type=submit]‘);

// Initialize on page ready.
if(label) {
indicator.text(label);
} else {
// Call update once on code initialization to update view if text is already in textarea,
// eg, if user relaoads page or hits back button and form textarea retains previoulsy entered text.
update(limit);
}

// When user focuses on the target element, do the following.
$(this).focus(function(){
if(timer == null) {
if(label) {
indicator.fadeOut(function(){indicator.text(”)}).fadeIn(function(){start()});
} else {
start();
}
}
});

// When user removes focus from the target element, do the following.
$(this).blur(function() {
// Stop timer that updates count and the indicator message.
stop();
// Update view.
if(label) {
indicator.fadeOut(function(){indicator.text(label)}).fadeIn();
}
});

// Disabled the submit button and form submission.
function disableSubmit() {
submit_button.attr(’disabled’, ‘disabled’);
}

// Enable the submit button and form submission.
function enableSubmit() {
submit_button.removeAttr(’disabled’);
}

function getIndicator(id){
// Get indicator element in the dom.
var indicator = $(’#'+id);
// If indicator element does not already exist in the dom, create it.
if(indicator.length == 0) {
target.after(spaceBeforeMessage + ‘‘);
indicator = $(’#'+id)
}
// Return reference to indicator element.
return indicator;
}

function isValid() {
var fail = $(’.limit_fail’);
return ! (fail.length);
}

// Handle limit error.
function limitFail() {
indicator.addClass(”limit_fail”);
indicator.removeClass(’limit_pass’);
indicator.removeClass(”limit_warn”);
if(validate) {
disableSubmit();
}
}

// Handle limit pass.
function limitPass() {
indicator.removeClass(”limit_fail”);
indicator.addClass(’limit_pass’);
indicator.removeClass(”limit_warn”);
if(validate) {
if(isValid()) {
enableSubmit();
} else {
disableSubmit();
}
}
}

// Handle limit error.
function limitWarn() {
indicator.removeClass(”limit_fail”);
indicator.removeClass(’limit_pass’);
indicator.addClass(”limit_warn”);
if(validate) {
if(isValid()) {
enableSubmit();
} else {
disableSubmit();
}
}
}

// Create helper functions.
function log(message) {
// Display
if(debug) {
try {
if(console) {
console.log(message);
}
} catch(e) {
// Do nothing on error.
}
}
}

// Start the timer that updates indicator.
function start() {
timer = setInterval(function(){update(limit)}, rate);
}

// Stop the timer that updates the indicator.
function stop() {
if(timer != null) {
clearInterval(timer);
timer = null;
}
}

// Update the indicator.
function update(limit){
var remaining = limit – target.val().length;
// Respond to remaining.
if(remaining < 0) {
limitFail();
} else if(remaining < (warningThreshold + 1) ) {
limitWarn();
} else {
limitPass();
}
if(remaining == 1) {
currentMessage = remaining + singularMessage;
} else {
currentMessage = remaining + pluralMessage;
}
// Update indicator.
indicator.text(currentMessage);
log(currentMessage);
}
};
})(jQuery);

In the meantime, to disable truncation on form submit, set truncate to false like this.

$(document).ready(function(){
// Pass HTML element id and character limit.
$(’#message’).maxChar(50, {truncate:false});
});

See the main page for more examples.

> Totally uncalled for to say someone’s work is worthless.

As you can see, Mitch has since “fixed” the bug by removing the buggy feature: now you no longer have realtime enforcement of the limit, and as a bonus you get a violation of what-you-see-is-what-you-submit principle.

Considered harmful.

To get scrollbars, the textarea element needs a rows attribute. So, I could add an option for the plugin to add a rows attribute with a default value of something like 5 to the textarea, if the textarea does not already have a rows attribute. Adding a rows attribute fixes the scrollbar issue.

Thoughts?

The big fix was removing the truncation of characters over the limit. Instead, I took the twitter approach to simply display the number of characters over the limit as negative numbers in the indicator.

Since I removed truncation of the user’s text, I did add an option to truncate the text on form submission. So when a user submits the form, only the allowed number of characters are submitted, even though the form still displays them. This is a new option named truncate. The default is true but can be set to false using the settings object.

I did not address XZero’s request to add limits with respect to rows. I am requesting more information about that, though.

Happy New Year!

$(document).ready(function(){
$(’#p’).maxChar(10, {indicator:’od’});
$(’#p’).maxChar(15, {indicator:’od’});
});