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.

Reply via email to