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.