Maison > Article > interface Web > js compte le nombre de mots restants dans la zone de texte

js compte le nombre de mots restants dans la zone de texte

php中世界最好的语言original: 2018-04-19 13:36:081591parcourir

Cette fois, je vais vous apporter les statistiques js du nombre de mots restants dans la zone de texte. Quelles sont les précautions pour les statistiques js du nombre de mots restants dans la zone de texte. Voici une pratique. cas, jetons un coup d'oeil.

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax gère l'échec de la session utilisateur

Cellule d'édition de table bootstrap

Yuansheng JS réalise la pagination de pages Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php ajax bootstrap Session JS table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：cellule d'édition de la table d'amorçage (exemple de code)Article suivant：cellule d'édition de la table d'amorçage (exemple de code)

Articles Liés

Voir plus