js实现多行文本框统计剩余字数功能


Posted in Javascript onMarch 28, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
javascript 闭包详解
Jul 02 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
js实现下拉框效果(select)
Mar 28 #Javascript
vue2.0获取自定义属性的值
Mar 28 #Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
Vue中的v-cloak使用解读
Mar 27 #Javascript
js实现抽奖效果
Mar 27 #Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 #Javascript
You might like
php获取随机数组列表的方法
2014/11/13 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js数组的操作详解
2013/03/27 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Django工程的分层结构详解
2019/07/18 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
物理教学随笔感言
2014/02/22 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
单位承诺书格式
2014/05/21 职场文书
经济国贸专业求职信
2014/06/18 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
学校捐款活动总结
2015/05/09 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书