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($('<span class="input-container"></span>'));//新增将容器的宽高和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 = $('<span class="charnum-count"></span>').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($('<span class="charnum-num"></span>').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，仓促总结，有待完善。

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

json转换成excel在线js小工具分享【不限制大小】
起因我们在工作过程中,偶尔会有需求是把json转换成excel的需求.一般这个时候,我们会跑到度娘那,在输入框中输入:"json excel".然后,你会发现这个一个网站&quo ...
JS实现页面的自动滚动【自动阅读、JS小工具】
关键知识点计时器 window.scroll onclick 解决方法 let currentTop = document.documentElement.scrollTop; var time = ...
WordPress中使主题支持小工具以及添加插件启用函数
https://www.jb51.net/article/76810.htm 这篇文章主要介绍了WordPress中使主题支持widget以及添加插件启用函数的方法,使WP可以使用小工具widget与 ...
Nodejs批量处理图片小工具：批量修改图片信息
git:GitHub - xiaoli0510/ImgToolNode: Nodejs批量处理图片小工具小工具一:批量修改文件夹里面的图片名称步骤: 1.安装nodejs. 2.根据需要修改edi ...
Kafka删除topic Note: This will have no impact if delete.topic.enable is not【另外强烈推荐一个kafka小工具】
vi /opt/kafka/config/server.properties 需要server.properties中设置delete.topic.enable=true否则只是标记删除或者直接重启. ...
MFC自用小工具源码
效果:快速打开计算机内常用的软件,功能,设置 // 自用小工具Dlg.cpp : 实现文件 // #include "stdafx.h" #include "自用小工具. ...
购物车——js小项目实例
购物车--js小项目实例首先构思好整体样式添加点击事件
经纬坐标(BLH)数据创建.kml文件小工具设计 Java版
技术背景 KML,是标记语言(Keyhole Markup Language)的缩写,最初由Keyhole公司开发,是一种基于XML 语法与格式的.用于描述和保存地理信息(如点.线.图像.多边形和模型 ...
怎样在计算机桌面上添加小工具日历,如何在电脑桌面添加时钟，日历等小工具。在电脑桌面添加时钟，日历等小工具的方法。...
今天给大家带来如何在电脑桌面添加时钟,日历等小工具.,在电脑桌面添加时钟,日历等小工具的方法.,让您轻松解决问题. 摆脱电脑右下角的死板数字时间,在电脑桌面上放一个可以移动的立体时钟,想起来就帅呆了~ ...

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

1.简介

2.代码实现

3.结语

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

最新文章

热门文章