[jQuery] Writing a plug-in that uses jQuery .live() method, but something doesn't work...
Hi,
I'm trying to write a plug-in that enforces a character limit on a
textarea of a form that is dynamically loaded via Ajax. If the
character limit is reached, I "disable" keyboard input except for a
few keys.
Without writing a plug-in, this code works:
(function ($)
{
$ (document).ready (function ()
{
var charLength;
var textfield;
var charLimitReached = false;
/* User cannot enter number of characters greater than character
limit */
$(".your_comment").live("keydown", function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only arrow keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 || event.which == 8 || event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40) &&
(charLimitReached == true)) {
event.preventDefault();
}
});
$(".your_comment").live("keyup", function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength >= 1000) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
}
}
}
) (jQuery);
When I wrap most of this functionality in a plug-in format, this no
longer works. Specifically, the return this.each() doesn't seem to do
anything:
(function ($)
{
/* Plug-in function to enforce character limits on form input and
textarea elements */
$.fn.enforceCharLimit = function(options) {
/* defaults */
var defaults = {
charLimit: 1000
};
var options = $.extend(defaults, options);
/* Apply behavior to all matched elements and return jQuery object
for chaining */
return this.each(function(){
var charLength;
var textfield;
var charLimitReached = false;
/* this refers to DOM element inside each() Use jQuery object
instead */
$(this).live("keydown", function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
/* Once character limit reached, only arrow keys, backspace, and
delete keys will work in the textarea */
if (!(event.which == 46 || event.which == 8 || event.which == 37
|| event.which == 38 || event.which == 39 || event.which == 40) &&
(charLimitReached == true)) {
event.preventDefault();
}
});
$(this).live("keyup", function(event) {
textfield = $(this).val();
charLength = $(this).val().length;
if (charLength >= options.charLimit) {
charLimitReached = true;
} else {
charLimitReached = false;
}
});
});
}
$(".your_comment").enforceCharLimit({ charLimit:
1001});
) (jQuery);
Any help would be appreciated. Thanks.