html textarea文字的个数计算

最新推荐文章于 2021-06-18 04:58:52 发布

No bug is impossible

最新推荐文章于 2021-06-18 04:58:52 发布

阅读量1k

点赞数

分类专栏： html 文章标签： textarea文字个数

本文链接：https://blog.youkuaiyun.com/No_bug_is_possible/article/details/79932347

版权

html 专栏收录该内容

4 篇文章

订阅专栏

html textarea文字的个数计算有可能我们会遇到 textarea文字的个数超出就不可以输入了的效果看下面代码效果加和减都有

<html>
<head>
<title> jquery完美实现textarea输入框限制字数</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript"  src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
  // 减法的js
     $(function(){
        $("#minus").keyup(function(){
         var len = $(this).val().length;
         if(len > 140){
          $(this).val($(this).val().substring(0,10));
         }
         var num = 140 - len;
         if(num<0){
         		num = 0;
         }
        $("#minus_span").text(num);
      });
     });


     // 加法的js
     $(function(){
     $("#Add").keyup(function(){

         var Num = $(this).val().length;
         console.log(Num)
          $("#Add_span").text(Num);
        });
      });


</script>
    <style type="text/css">
      h6{color:blue;}
      textarea{resize:none;}
      #minus_span{color:red;}
    </style>
</head>
<body>

  <h6>你可以输入<span>140</span>个字，现在剩余<span id="minus_span">140</span>个</h6>
  <textarea name="con" id="minus" cols="45" rows="6"></textarea>
  <br>
  <h6>你输入一共<span id="Add_span">0</span>个字</h6>
  <textarea name="" id="Add" cols="30" rows="10"></textarea> 

</body>
</html>

如果有帮到您请支持下，谢谢！您的支持就是我的动力！