带行号统计字数的文本框

效果图

html部分

    id="test_temp"</span>  name="test_temp" class="countTextarea" required  rows="8" Onkeyup="cal1();" maxlength="2000" >
    0 /2000


js部分

$("#test_temp").setTextareaCount();

function cal1() {
    var length = $("#test_temp").val().length;
    if (length > 2000) {
        $("#test_temp").text(length);
    } else {
        $("#num_count1").text(length);
    }
}

js文件

;(function($){
    var AutoRowsNumbers = function (element, config){
        this.$element = $(element);
        this.$group = $('
', { 'class': "textarea-group" });
        this.$ol = $('
', { 'class': 'textarea-rows' });
        this.$wrap = $('
', { 'class': 'textarea-wrap' });
        this.$group.css({
            "width" : this.$element.outerWidth(true) + 'px',
            "display" : config.display
        });
        this.$ol.css({
            "color" : config.color,
            "width" : config.width,
            "height" : this.$element.height(),
            "font-size" : this.$element.css("font-size"),
            "line-height" : this.$element.css("line-height"),
            "position" : "absolute",
            "overflow" : "hidden",
            "margin" : 0,
            "padding" : "0 4px",
            "text-align": "right",
            "font-family" : this.$element.css("font-family")
        });
        this.$wrap.css({
            /*"padding" : ((this.$element.outerHeight() - this.$element.height())/2) + 'px 0',*/
            "padding": "5px 0",
            "background-color" : config.bgColor,
            "position" : "absolute",
            "box-sizing": "border-box",
            "margin": "1px",
            "border-right": "1px solid #ccc",
            "width" : config.width,
            "height" : (10+this.$element.height()) + 'px'
        });
        this.$element.css({
            "white-space" : "pre",
            "resize": "none",
            "margin": 0,
            "box-sizing": "border-box",
            "padding-left" : (parseInt(config.width) -  parseInt(this.$element.css("border-left-width")) + parseInt(this.$element.css("padding-left"))) + 'px',
            /*"width": (this.$element.width() - parseInt(config.width)) + 'px'*/
            "width": "100%",
        });

    }

    AutoRowsNumbers.prototype = {
        constructor: AutoRowsNumbers,

        init : function(){
            var that = this;
            that.$element.wrap(that.$group);
            that.$ol.insertBefore(that.$element);
            this.$ol.wrap(that.$wrap)
            that.$element.on('keydown',{ that: that }, that.inputText);
            that.$element.on('scroll',{ that: that },that.syncScroll);
            that.inputText({data:{that:that}});
        },

        inputText: function(event){
            var that = event.data.that;

            setTimeout(function(){
                var value = that.$element.val();
                value.match(/\n/g) ? that.updateLine(value.match(/\n/g).length+1) : that.updateLine(1);
                that.syncScroll({data:{that:that}});
            },0);
        },

        updateLine: function(count){
            var that = this;
            that.$element;
            that.$ol.html('');

            for(var i=1;i<=count;i++){
                that.$ol.append("
"+i+"
");
            }
        },

        syncScroll: function(event){
            var that = event.data.that;
            that.$ol.children().eq(0).css("margin-top",  -(that.$element.scrollTop()) + "px");
        }
    }

    $.fn.setTextareaCount = function(option){
        var cOnfig= {};
        var option = arguments[0] ? arguments[0] : {};
        config.color = option.color ? option.color : "#999999";
        config.width = option.width ? option.width : "30px";
        config.bgColor = option.bgColor ? option.bgColor : "#f7f7f7";
        config.display = option.display ? option.display : "block";

        return this.each(function () {
            var $this = $(this),
                data = $this.data('autoRowsNumbers');

            if (!data){ $this.data('autoRowsNumbers', (data = new AutoRowsNumbers($this, config))); }

            if (typeof option === 'string'){
                return false;
            } else {
                data.init();
            }
        });
    }
})(jQuery)