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键盘
May 02 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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采集速度探究总结(原创)
2008/04/18 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
网页常用特效代码整理
2006/06/23 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
老生常谈js数据类型
2017/08/03 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
js获取form表单中name属性的值
2019/02/27 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python批量更改文件名的实现方法
2017/10/29 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
2015年加油站工作总结
2015/05/13 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python