js小工具-给多行文本框添加字符统计

1.简介

在网页开发中，多行文本框是一个比较常见的东西，标签名为textarea，熟悉textarea的朋友应该知道，textarea有一个maxlength属性，可以限制文本框的输入字符数。在开发的需求里，字符限制和字符统计几乎是捆绑出现。因此我就写了一个字符统计的小工具。

2.代码实现

//其实我感觉这个代码也不是很难，好像没什么好解释的，要不大家看着用就好了。

var dc = {
	//给多行文本框添加一个计数提示
	charNumCount: function(textarea,styles,maxlength,callback,cstyles){
		var $textarea = $(textarea);
		$textarea.each(function(index,ele){
			var $self = $(ele);
			var $parent = $self.parent();
			maxlength = parseInt(maxlength);
			if(isNaN(maxlength))
				maxlength = parseInt($self.attr('maxlength'));
			if(!$parent.data('charnumcount')){
				//判断是否存在一个类名为input-container的父元素
				if(!$parent.hasClass('input-container')){
					$self.before($(''));
					//新增将容器的宽高和display属性设置为和input元素一样
					var $ctner = $self.siblings('.input-container');
					$ctner.append($self).css({
						"position" : "relative",
						"display" : $self.css('display'),
						"width" : $self.css("width"),
						"height" : $self.css("height")
					});
					try{$ctner.css(cstyles);}catch(e){}//由外部矫正input-contianer的样式，如设置宽高为百分比值
				}
				$parent = $self.parent('.input-container');
				//创建计数盒子
				var $cnum = $('').css({
					'color': '#999',
					'font-size': '12px',
					'line-height': '1',
					'position': 'absolute',
					'right': '20px',
					'bottom': '15px'
				});
				try{$cnum.css(styles);}catch(e){}
				if(!isNaN(maxlength)){
					$cnum.data('maxlength',maxlength).html('/'+maxlength);
				}
				//添加计数盒子并设置默认值
				$cnum.prepend($('').html($self.val().length));
				$parent.append($cnum);
				//绑定事件
				$self.on("input.numcount",function(){
					var $self = $(this);
					$self.parent().find('.charnum-num').html($self.val().length);
				});
				if(typeof callback === 'function'){
					callback($cnum);
				}
			}
		});
	},
	removeCharNumCount: function(input){
		var $input = $(input);
		$input.each(function(index,ele){
			var $self = $(ele);
			var $parent = $self.parent();
			if($parent.data('charnumcount')){ 
				//移除清空按钮和keyup事件
				$self.off("input.numcount");
				$parent.data('charnumcount',false).children('.charnum-count').remove();
				//如果此时$parent中只有$self一个元素,则将$self移到外面
				if($parent.children().length==1){
					$parent.parent().append($self).end().remove();
				}
			}
		});
	}
}

附多行文本框常用滚动条样式(代码为scss代码，scss也很简单的，如果不清除的话也可以百度一下，开发中也很常用哦)

//多行文本框样式
textarea{
	position: relative;
	&::-webkit-scrollbar {
		background-color: #f0f0f0;
		border-radius: 50%;
		width: 6px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 8px;
		outline-offset: -2px;
		background: rgba(0,0,0,0.1);
		border: none;
	}
	&::-webkit-scrollbar-track-piece {
		display: none;	
	}
	&::-webkit-scrollbar-button {
		background-color: #f0f0f0;
		height: 5px;
	}
}

3.结语

本文写于20190826，仓促总结，有待完善。