怎么实现获取textarea的动态剩余字数

这次给大家带来怎么实现获取textarea的动态剩余字数,获取textarea的动态剩余字数的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

html部分:

  剩余可输入600字

登录后复制

js部分:

$(function(){      $('#text_txt1').on('keyup',function(){          var txtval = $('#text_txt1').val().length;          console.log(txtval);         var str = 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实现案例

function changeLength(obj,num){       obj.on('keyup',function(){       var txtval = obj.val().length;           //console.log(txtval);           var str = 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的长度   function changeLength(obj,lg){       var len = $(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的动态剩余字数的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3194367.html

(0)
上一篇 2025年4月1日 01:53:23
下一篇 2025年4月1日 01:53:33

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论