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 相关文章推荐
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
layui按条件隐藏表格列的实例
Sep 19 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/03/13 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
python实现红包裂变算法
2016/02/16 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python处理session的方法整理
2019/08/29 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python剪切视频与合并视频的实现
2020/03/03 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
单位租房协议范本
2014/12/03 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书