js如何实现多行文本框统计剩余字数功能
短信预约 -IT技能 免费直播动态提醒
这篇文章给大家分享的是有关js如何实现多行文本框统计剩余字数功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js统计文本框剩余字数</title>
<style type="text/css">
#area{
width: 300px;
height: 300px;
resize:none;
}
</style>
</head>
<body>
<textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能输入十个字"></textarea>
<!--
resize:none 多行文本框不可以拖动
onkeypress="sy()"键盘按住或点击时调用方法
maxlength="10"定义最大宽度
placeholder="只能输入十个字" 定义默认提示
autofocus 定义自动获得焦点
-->
<span>你还可以输入:<strong id="span" >10</strong>个字</span>
<input type="button" value="统计" onclick="fun();">
<div id="div"></div>
<script type="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++){
var ch=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("div").innerHTML="大写字母有"+b+"个，小写字母有"+a+"个，数字有"+c+"个";
}
</script>
</body>
</html>感谢各位的阅读！关于“js如何实现多行文本框统计剩余字数功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
