Maxlength in textarea using jQuery

Question

Using the script off http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html I am trying to limit the input of a textarea to 1000 characters. Prototype is also included in the page.

It works fine in chrome, but in firefox the following error is given and the input is not limited:

$("textarea[maxlength]") is null

I'm completely stumped. Any help would be appreciated. The code snippets follow.

The textarea:

<%= text_area 'project', 'description', 'cols' => 60, 'rows' => 8, 'maxlength' => 1000 %>

The javascript:

<%= javascript_include_tag "jquery", "jquery.maxlength" -%>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $().maxlength();
  })
</script>

jquery.maxlength.js:

jQuery.fn.maxlength = function(){
    $('textarea[maxlength]').keypress(function(event){
        var key = event.which;
        //all keys including return.
        if(key >= 33 || key == 13) {
            var maxLength = $(this).attr('maxlength');
            var length = this.value.length;
            if(length >= maxLength) {
                event.preventDefault();
            }
        }
    });
}

Exact same question:- [ asked by me ;) ] Please see this. http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-javascript — Rakesh Juyal, Feb 17 '10 at 05:43
This really isn't the same question at all. He already has a solution, he is just having trouble getting the jQuery part to work. — Doug Neiner, Feb 17 '10 at 05:45
not _exactly_ the same question. OP is specifically asking about jquery :D — Jared, Feb 17 '10 at 05:46

score 6 · Accepted Answer · answered Feb 17 '10 at 05:38

6

Wrap your jquery.maxlength.js file in this:

(function($){
   .. existing code goes here
})(jQuery);

When you call $().maxlength() it is trying to use the $ variable, but in a different scope and it no longer is equal to jQuery. By wrapping the plugin in a self executing anonymous function, it creates a private scope where $ = jQuery

answered Feb 17 '10 at 05:38

Doug Neiner

65,509
13
109
118

+1 for going the extra step and explaining the anon func and var scoping. – Jared Feb 17 '10 at 05:47
Ah, I see. I don't fully understand the syntax of the anonymous function, how does the jQuery object get passed in as '$'? (function($){...})(jQuery) – Cam Feb 19 '10 at 20:07
@Cam, its just the syntax of how JS works. For instance `(function(a,b,c){ alert(a + b + c); })(1,2,3)` would alert `6` since it takes the three comma separated items in the last parens, and will pass it as the parameters to the function. Hope that helps a bit. – Doug Neiner Feb 20 '10 at 01:23
Cheers for explaining that. I've made the changes you and @Jared detailed, but there are no differences. The page still works in chrome and has no effect in firefox 3.5.8. Any other ideas? – Cam Feb 21 '10 at 22:43

score 3 · Answer 2 · answered Feb 17 '10 at 05:41

Since jQuery is set to noConflict() mode you need to change jquery.maxlength.js to

(function($)
    $.fn.maxlength = function(){
        $('textarea[maxlength]').keypress(function(event){
            var key = event.which;
            //all keys including return.
            if(key >= 33 || key == 13) {
                var maxLength = $(this).attr('maxlength');
                var length = this.value.length;
                if(length >= maxLength) {
                    event.preventDefault();
                }
            }
        });
    };
})(jQuery);

One +1 deserves another. This is the problem. I wonder why it worked in Chrome though. I wonder if Chrome has a different definition of scope. — Doug Neiner, Feb 17 '10 at 05:49

Maxlength in textarea using jQuery

2 Answers2

Linked