js counts the number of words remaining in the text box-JS Tutorial-php.cn

js counts the number of words remaining in the text box

php中世界最好的语言

Release： 2018-04-19 13:36:08

Original

1599 people have browsed it

This time I will bring you js statistics of the number of remaining words in the text box, and what are the precautions for js statistics of the number of remaining words in the text box. The following is a practical case, let's take a look.

<!DOCTYPE html><htmllang="en"><head>  <metacharset="UTF-8">  
<title>js统计文本框剩余字数</title>  <styletype="text/css">   
#area{      width: 300px;      height: 300px;      resize:none;    }  
</style></head><body>  <textareaautofocusid="area"onkeydown="sy()"maxlength="10"placeholder="只能输入十个字">
</textarea>
<!--   resize:none 多行文本框不可以拖动   onkeypress="sy()"键盘按住或点击时调用方法   
maxlength="10"定义最大宽度   placeholder="只能输入十个字"  定义默认提示   autofocus  定义自动获得焦点   -->  
<span>你还可以输入:<strongid="span">10</strong>个字</span>  <inputtype="button"value="统计"onclick="fun();">  <pid="p"></p>  
<scripttype="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++){         varch=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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!