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


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

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

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

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

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

html部分:

1

2

<textarea id="text_txt1"></textarea

<span id ="num_txt1">剩余可输入600字</span>

js部分:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(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实现案例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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:

1

2

3

4

5

6

7

8

9

<div class="family_v2"

    <p class="nickname_v2">简介:</p

     <textarea id="content" name="sign" style="height:60px;overflow-y: hidden;" 

     onkeyup="changeLength(this,60)" class="nicknameBox_v2 brief_box_v2"

     </textarea

     <div class="limit_num_v2"

         <h3>60</h3

    </div

 </div>

js:

1

2

3

4

5

6

7

8

9

//验证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));  

    }  

}

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML的基础知识.关于css样式表和样式属性的详细介绍

HTML的meta标签常见用法介绍

HTMLa标签的href属性指定相对路径与绝对路径使用方法

以上就是怎么实现获取textarea的动态剩余字数的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

使用js写入读取cookie

html5调用百度地图api获取当前位置并直接导航目的地的方法

制作动态视觉差背景(h5)的方法

input,button,textarea等表单元素防止重复点击

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

利用纯css实现动态的文字效果实例

html文本域标签属性有哪些?html文本域标签属性用法介绍

怎样解决textarea标签大小不可变不能通过鼠标拖动的方式来拖动的问题

如何利用phonegap获取设备信息的方法

如何实现textarea的文本转为html即回车换行

更多相关阅读请进入《textarea》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...