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 相关文章推荐
document节点对象的获取方式示例介绍
Dec 24 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS判断数组那点事
Oct 10 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 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/07/01 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
php组合排序简单实现方法
2016/10/15 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
python查询sqlite数据表的方法
2015/05/08 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
什么是View State?
2013/01/27 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
通用自荐信范文
2014/03/14 职场文书
公司年会策划方案
2014/05/17 职场文书
顶岗实习计划书
2015/01/16 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫