使用jQuery在textarea中的Maxlength

时间:2010-02-17 05:33:23

标签: javascript jquery ruby-on-rails prototypejs

关闭http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html脚本我试图将textarea的输入限制为1000个字符。原型也包含在页面中。

它在chrome中工作正常,但在firefox中给出了以下错误,输入不受限制:

$("textarea[maxlength]") is null

我完全难过了。任何帮助,将不胜感激。代码片段如下。

textarea:

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

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

2 个答案:

答案 0 :(得分:6)

将您的jquery.maxlength.js文件换行:

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

当您致电$().maxlength()时,它会尝试使用$变量,但在不同的范围内,它不再等于jQuery。通过将插件包装在自执行匿名函数中,它会创建一个私有范围$ = jQuery

答案 1 :(得分:3)

由于jQuery设置为noConflict() mode,您需要将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);