這次帶給大家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>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是js統計文字方塊內剩餘字數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
