js统计文本框内剩余字数

来源：喜迪情感

这次给大家带来js统计文本框内剩余字数，js统计文本框内剩余字数的注意事项有哪些，下面就是实战案例，一起来看一下。

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！