欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用JQ实现统计剩余字数

程序员文章站 2022-04-14 13:33:49
JQ实现统计文本框剩余字数 效果图: 代码如下,复制即可使用: 如果有更好的方法,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!! ......

 JQ实现统计文本框剩余字数

 效果图:

 使用JQ实现统计剩余字数

 代码如下,复制即可使用:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JQ实现统计剩余字数</title>
   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<textarea name="" id="" cols="100" rows="30"></textarea>
<span>你还可以输入<strong style="color:red;">140</strong>个字</span>
<script>
    var maxLength = 140;
    $('textarea').keyup(function(){
        var L = $(this).val().length;
        $('strong').text(maxLength-L);//总字数减去输入的字数

        if(parseInt($('strong').text())<0){
            $('strong').text('0'); //如果输入文字小于0 则文本显示为0
            //alert($(this).val());
            var val1 = $(this).val().substr(1,140);//截取输入长度
            //substr(不推荐使用,ECMAScript没有标准化substr()方法)
            $(this).val(val1);
        }
    })
</script>
</body>
</html>

 如果有更好的方法,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!