如何实现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中获取动态剩余字数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
软银愿景基金的风险共担结构:合伙人共担利润和亏损

软银愿景基金的风险共

软银针对愿景基金设计了一套不同寻常的薪酬计划,包括一
优必选新一轮融资即将到位 估值达100亿美元

优必选新一轮融资即将

最新估值100亿美元,继续把持全球估值最高的AI创业公司
苹果249美元清仓iPhone SE 3天就抢空了

苹果249美元清仓iPhon

苹果这次提供的是全新、未包装的iPhone SE,32GB的售价
京东徐雷的无所谓与无所畏

京东徐雷的无所谓与无

他说自己就是个手艺人。
为什么佩奇成为“金猪”,可孙悟空还是“土猴”?

为什么佩奇成为“金猪

小猪佩奇虽然在国内获得了巨大成功,但最大获利者却是国
"我秀"诉"六间房"商标侵权及不正当竞争 索赔520万

"我秀"诉"六间房"

据悉,因认为“六间房”网站使用了“我秀”等词汇作为关
最新文章
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

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

详解前端在html页面之

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

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur