js统计文本框内剩余字数
程序员文章站
2022-05-05 18:09:12
...
这次给大家带来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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是js统计文本框内剩余字数的详细内容，更多请关注其它相关文章！
上一篇： MySQL innoDB 存储引擎学习篇
下一篇： SSH中三大框架整合详解