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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
vue文件树组件使用详解
Mar 29 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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学习资料汇总与网址
2007/03/16 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python with标签使用方法解析
2020/01/17 Python
python with语句的原理与用法详解
2020/03/30 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
实习教师自我鉴定
2013/12/12 职场文书
公司端午节活动方案
2014/02/04 职场文书
5s推行计划书
2014/05/06 职场文书
会议通知范文
2015/04/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL