js实现多行文本框统计剩余字数功能的示例代码分享

来源：动视网责编：小采时间：2020-11-27 20:23:23

js实现多行文本框统计剩余字数功能的示例代码分享

js实现多行文本框统计剩余字数功能的示例代码分享:本文主要介绍了js实现php.cn/code/5983.html target=_blank

推荐度：

点击下载本文 文档为doc格式

导读js实现多行文本框统计剩余字数功能的示例代码分享:本文主要介绍了js实现php.cn/code/5983.html target=_blank

本文主要介绍了js实现php.cn/code/5983.html" target="_blank">多行文本框统计剩余字数功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!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();">
 <p id="p"></p>
 <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("p").innerHTML="大写字母有"+b+"个，小写字母有"+a+"个，数字有"+c+"个";
 }
 </script>
</body>
</html>

js实现多行文本框统计剩余字数功能的示例代码分享

js实现多行文本框统计剩余字数功能的示例代码分享:本文主要介绍了js实现php.cn/code/5983.html target=_blank

推荐度：

点击下载本文 文档为doc格式

标签： js 代码统计多

热门焦点

js实现多行文本框统计剩余字数功能的示例代码分享

js实现多行文本框统计剩余字数功能的示例代码分享

js实现多行文本框统计剩余字数功能的示例代码分享

最新推荐

猜你喜欢

热门推荐