textArea剩余字数统计插件

最新推荐文章于 2022-02-26 19:29:34 发布

cc20150126

最新推荐文章于 2022-02-26 19:29:34 发布

阅读量10w+

点赞数 1

分类专栏： web 文章标签： textArea 剩余字数统计 js web 前端

本文链接：https://blog.csdn.net/class_horse/article/details/47609357

版权

web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果如：

js代码：

/**
 * textArea字数统计
 * 
 * Created on : 2015-6-26, 11:49:24
 * Author     : tom lyl010991@126.com
 */
var wordTool = {
    /**
     * 初始化
     * 
     * @param json json数组格式，如[{id:"news1", max:300}, {id:"news2", max:600}]
     */
    init: function (json) {
    	$.each(json, function(i, item) {
			 var id = item.id;
			 var max = item.max;
			 // 创建一个匿名div，将自身加入其中，获取textarea自身的html
			 myself_html = $('<div>').append($('#'+id).clone()).html();
			 html  = '<div class="wordCount '+id+'">';
			 html += myself_html;
			 html += '<span class="wordwrap"><var class="word">'+max+'</var>/'+max+'</span>';
			 html += '</div>';
			 $('#'+id).replaceWith(html);
			 
			 wordTool.statInputNum(id);
		 });
    	wordTool.initCss();
    },
    /**
     * 剩余字数统计
     * 
     * @param id textArea的id
     */
	statInputNum: function(id){
		//先选出 textarea 和 统计字数 dom 节点
		var div = $('.'+id);
		var textArea = div.find('#'+id);
		var wordWrap = div.find(".word");
		var max = wordWrap.text();
		
		textArea[0].setAttribute("maxlength", max);
		var curLength = textArea.val().length;
		wordWrap.text(max - curLength);
		textArea.on('input propertychange', function() {
			wordWrap.text(max - $(this).val().length);
		});
	},
    /**
     * 初始化样式
     */
    initCss: function(id){
		 $(".wordCount").css({"position": "relative"});
		 $(".wordCount .wordwrap").css({"position": "absolute","right": "6px","bottom": "6px"});
		 $(".wordCount .word").css({"color": "#990000", "padding": "0 4px"});
	 }
}