如何实现textarea中获取动态剩余字数的方法?下面小编就为大家带来一篇实现textarea中获取动态剩余字数的方法。希望对大家有所帮助。一起跟随小编过来看看吧

工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步。

案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能。当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下。当然我的封装还有缺漏,但是基本功能是实现了。

首先介绍下单个textarea实现案例

html部分:

剩余可输入600字

js部分:

$(function(){ $('#text_txt1').on('keyup',function(){vartxtval=$('#text_txt1').val().length;console.log(txtval);varstr=parseInt(600-txtval);console.log(str);if(str>0){$('#num_txt1').html('剩余可输入'+str+'字');}else{$('#num_txt1').html('剩余可输入0字');$('#text_txt1').val($('#text_txt1').val().substring(0,600));//这里意思是当里面的文字小于等于0的时候,那么字数不能再增加,只能是600个字}//console.log($('#num_txt').html(str));});})

然后介绍同页面下多个textarea实现案例

functionchangeLength(obj,num){obj.on('keyup',function(){vartxtval=obj.val().length;//console.log(txtval);varstr=parseInt(600-txtval);//console.log(str);if(str>0){num.html('剩余可输入'+str+'字');}else{num.html('剩余可输入0字');obj.val(obj.val().substring(0,600));}//console.log($('#num_txt').html(str));});}$(function(){//我这里有四个,所以调用4次changeLength($('#text_txt1'),$('#num_txt1'));changeLength($('#text_txt2'),$('#num_txt2'));changeLength($('#text_txt3'),$('#num_txt3'));changeLength($('#text_txt4'),$('#num_txt4'));});

当然这里面实际上要求的字数也可以封装在函数内部,不过我就不封装了。这样就实现了当输入文字的时候,span内部会自动显示剩余字数,当输入值达最高值时,显示剩余字数为0,且无法在新填入内容。当删除文字的时候,span又能动态获取剩余字数。

下面上下别人的代码,这次多少也借鉴了别人的写法

html:

简介:

60

js:

//验证textarea的长度 functionchangeLength(obj,lg){varlen=$(obj).val();$(obj).next().find("h3").text(lg-len.length);if(len.length>=lg){$(obj).next().find("h3").text(0);$(obj).val(len.substring(0,lg));}}

以上这篇如何实现textarea中获取动态剩余字数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
双11走到第十年 满满的购物车里装的是需求还是欲望?

双11走到第十年 满满

概念化刺激下的“买买买”终究不是解决问题的方法,天猫
戴森如何成为中产收割机?

戴森如何成为中产收割

戴森公司正在引领着家电行业的潮流。即便是乔布斯,也曾
海关与菜鸟联合创新 双11通关将实现“秒响应”

海关与菜鸟联合创新

11月9日,杭州海关关长马建哲与菜鸟网络总裁万霖在参加
六部委:清理老年代步车等低速电动车 严禁新增产能

六部委:清理老年代步车

工业和信息化部、发改委等六部委今天联合印发《关于加
美版“大众点评”Yelp遭广告商抛弃 股价盘中跌超32%

美版“大众点评”Yelp

财报显示,三季度,Yelp的净广告客户增加为零。Yelp从今年
苹果:部分iPhone X出现触控问题 官方将免费更换

苹果:部分iPhone X出现

苹果公告称,Apple 已确定,由于 iPhone X 显示屏模块上的
最新文章
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

最近项目经理交小编一个活儿,需要在界面当中画一条竖线
多种实例解析HTML表单form的使用方法

多种实例解析HTML表单

这篇文章主要以多种实例的方式帮助大家了解分析HTML表
Html+CSS绘制三角形图标

Html+CSS绘制三角形图

这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标