jquery字符输入个数限制插件,支持显示剩余字符个数 iptMaxNum

jquery字符输入个数限制插件,支持显示剩余字符个数 iptMaxNum

———————————

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery限制输入字数</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
/**
 * $.iptMaxNum();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('#Comment_txt').iptMaxNum({max:50 });
 * $('#Comment_txt').iptMaxNum({max:50 , box:"#Comment_txt_num"});
 */
;(function($){   
    $.fn.extend({     
         iptMaxNum: function(options) {   
            //默认参数
            var defaults = {
                 /* 最多多少个字符 */
                 max:60, 
                 /* 显示个数的容器 选择器*/
                 box:'' 
           }        
            var options = $.extend(defaults, options);   
            return this.each(function(){
                var o = options;   
                var $this = $(this);
                var _boxnum =function(){
                    $(o.box).text( o.max -0 - $this.val().length );
                }
                _boxnum();
                $this.on("keyup , change ",function(){
                    var curLength=$this.val().length; 
                    if(curLength >= o.max){
                        var str=$this.val().substring(0, o.max );
                        $this.val(str);
                        alert("超过字数限制,多出的字将被截断!" );
                    }
                    else{
                        
                    }
                    _boxnum();
                })          

 
            });   
        }   
    });   
       
})(jQuery);
</script>
</head>
<body>
您还可以输入<span id="textCount">5</span>个字符<br />
<textarea name="textarea" id="TextArea" cols="45" rows="5" ></textarea>
<script type="text/javascript">
    $(function(){
        $('#TextArea').iptMaxNum({max:50 , box:"#textCount"});
    });

</script>
</body>
</html>


发表评论

邮箱地址不会被公开。 必填项已用*标注