新手案例--字数统计

最新推荐文章于 2023-06-01 18:33:26 发布

popping_Sun

最新推荐文章于 2023-06-01 18:33:26 发布

阅读量307

点赞数

分类专栏：新手教学文章标签： javascript html

本文链接：https://blog.csdn.net/popping_sun/article/details/109287068

版权

新手教学专栏收录该内容

8 篇文章 1 订阅

订阅专栏

字数统计小案例

hello!今天又要带大家学习一下字数统计的小案例，这种在平常生活中非常常见，比如：我们在注册某个页面。需要填写自我介绍，一般都会有字数限制，最多200字，当我们填内容时，字数也在慢慢减少，直到写不了。这种情节也完全可用js来实现，并且很简单，跟着下面的代码敲一遍，大家肯定会掌握的。
首先我们先整理下思路，我们需要利用文本域，并设置最大字数，接下来我们就要想办法统计写进去的字数，这样才能知道剩余字数，这也是该案例的难点与重点。那么该用什么方法来实现的？答案就是利用表单事件——oninput，该事件是在用户输入时触发的事件，那么具体怎么实现呢？让我们看代码

<!DOCTYPE html>
<html>
<head>    
<meta charset='utf-8'>    
<meta http-equiv='X-UA-Compatible' content='IE=edge'>    
<title>字数统计</title>    
<meta name='viewport' content='width=device-width, initial-scale=1'>   
 <style>
           *{               
   margin: 0 auto;           
    }            
      .box{              
       border: 2px solid purple;                              
       width: 80%;               
       text-align: center;                
       height: 300px;           
        }           
        .txt{                
           width: 80%;               
           outline: none;               
           text-indent: 2em;                border-radius: 10px;               
            border: 1px solid deepskyblue;            }
         .text{                
            color: skyblue;          
              }    
              </style>
              </head>
              <body>    
              <div class = "box">   
               <textarea class="txt" maxlength="150" placeholder="请输入评论" cols="60" rows="10"></textarea>            
              <p class="text">还能再输入<span class="remain"></span>个字符            
              </p>   
               </div>
    <script>        
    //统计字数           
    var remain = document.querySelector(".remain");           var txt = document.querySelector(".txt");            remain.innerHTML = txt.maxLength;//将字数添加
     txt.oninput = function(){            
    var t = this.value.length;
    //赋值获取得到输入的字数             
    remain.innerHTML = txt.maxLength - t;
    //得到剩余的字数            
}   
  </script>
  </body>
  </html>

中间不要有空格，不然会出现统计bug，并且写入时鼠标光标不能准确点到开始输入的地方，这也是一个细节！

popping_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手案例--字数统计

字数统计小案例hello!今天又要带大家学习一下字数统计的小案例，这种在平常生活中非常常见，比如：我们在注册某个页面。需要填写自我介绍，一般都会有字数限制，最多200字，当我们填内容时，字数也在慢慢减少，直到写不了。这种情节也完全可用js来实现，并且很简单，跟着下面的代码敲一遍，大家肯定会掌握的。首先我们先整理下思路，我们需要利用文本域，并设置最大字数，接下来我们就要想办法统计写进去的字数，这样才能知道剩余字数，这也是该案例的难点与重点。那么该用什么方法来实现的？答案就是利用表单事件——oninput，
复制链接

扫一扫

专栏目录