Độ dài tối đa trong văn bản sử dụng jQuery

Question

Sử dụng tập lệnh tắt http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html Tôi đang cố giới hạn đầu vào của vùng văn bản thành 1000 ký tự. Prototype cũng được bao gồm trong trang.

Nó hoạt động tốt trong chrome, nhưng trong firefox lỗi sau được đưa ra và đầu vào không giới hạn:

$("textarea[maxlength]") is null 

Tôi hoàn toàn bối rối. Bất kỳ trợ giúp sẽ được đánh giá cao. Đoạn mã theo sau.

Các textarea:

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

Các 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(); 
      } 
     } 
    }); 
} 

Answer 1

Quấn tập tin jquery.maxlength.js của bạn trong này:

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

Khi bạn gọi $().maxlength(), nó đang cố gắng sử dụng biến số $, nhưng trong phạm vi khác và không còn bằng jQuery. Bằng cách gói plugin trong một tự thực hiện chức năng ẩn danh, nó tạo ra một phạm vi riêng nơi $ = jQuery

Answer 2

Kể từ jQuery được thiết lập để noConflict() mode bạn cần thay đổi jquery.maxlength.js để

(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);