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

最新资讯
谷歌和亚马逊结束流媒体“冷战”:互相登陆对方设备

谷歌和亚马逊结束流媒

一名谷歌发言人告诉Engadget,首先是YouTube的主应用在F
亚马逊败退的背后,到底是什么

亚马逊败退的背后,到底

中国互联网公司的求生欲或者征服欲,过早地透支掉了人口
苹果2019环境报告:减35%碳足迹 利用AI提高回收效率

苹果2019环境报告:减3

苹果今日还宣布启用位于美国德克萨斯州的材料回收实验
中国游戏出海不易,腾讯能击穿外国玩家吗?

中国游戏出海不易,腾讯

版号寒冬令腾讯一度被资本市场看衰,围绕腾讯转型、过坎
传今年iPhone将采用三摄系统 背部增加超广角镜头

传今年iPhone将采用三

了让这些镜头看起来不那么突兀,它们都会被涂成黑色,隐藏
深击|亚马逊中国电商 毁于谁手?

深击|亚马逊中国电商

面对模式多变、打法草莽的本土竞争对手,它的掉队似乎成
最新文章
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