js实现多行文本框统计剩余字数功能代码实例-js教程-PHP中文网

js实现多行文本框统计剩余字数功能代码实例

怪我咯

发布： 2017-07-04 15:06:35

原创

1222 人浏览过

本文主要介绍了js实现多行文本框统计剩余字数功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js统计文本框剩余字数</title>
  <style type="text/css">
    #area{
      width: 300px;
      height: 300px;
      resize:none;
    }
  </style>
</head>
<body>
  <textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能输入十个字"></textarea>
<!--
   resize:none 多行文本框不可以拖动
   onkeypress="sy()"键盘按住或点击时调用方法
   maxlength="10"定义最大宽度
   placeholder="只能输入十个字"  定义默认提示
   autofocus  定义自动获得焦点
   -->
  <span>你还可以输入:<strong id="span" >10</strong>个字</span>
  <input type="button" value="统计" onclick="fun();">
  <p id="p"></p>
  <script type="text/javascript">
     function sy() {
       var num=document.getElementById("area").value.length;
       //console.log(num);
       var sheng=10-num;
       if(sheng==0){
         //变颜色为红色
         console.log(sheng);
         document.getElementById("span").style.color="#ff0000";
       }else{
         //变颜色为黑色
         document.getElementById("span").style.color="#000000";
       }
       document.getElementById("span").innerHTML=sheng;
     }
     function fun(){
       var txt=document.getElementById("area").value;
       //这么写的意思是申请abc三个值都为0
       var a=b=c=0;
       for(var i=0;i<txt.length;i++){
         var ch=txt.charAt(i);
         if(ch>="a"&&ch<="z"){
           a++;
         }else if(ch>="A"&&ch<="Z"){
           b++;
         }else if(ch>="0"&&ch<="9"){
           c++;
         }
       }
       //abc中分别统计了小写字母、大写字母、数字的个数
       document.getElementById("p").innerHTML="大写字母有"+b+"个，小写字母有"+a+"个，数字有"+c+"个";
     }
  </script>
</body>
</html>

登录后复制

以上是js实现多行文本框统计剩余字数功能代码实例的详细内容。更多信息请关注PHP中文网其他相关文章！