Javascript实现字数统计


Posted in Javascript onJuly 03, 2015

字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<script>
function cal_words(){
  var length = document.getElementById("test").value.length;
  document.getElementById("num").innerHTML = length;
}
</script>
</head>

<body>
<div class="reply">
 <textarea id="test" onKeyUp="cal_words()"></textarea>
 <div>字数:<span id="num">0</span></div>
</div>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
js对象的比较
Feb 26 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
js实现坦克大战游戏
Feb 24 Javascript
vue实现树状表格效果
Dec 29 Vue.js
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 #Javascript
jQuery中 delegate使用的问题
Jul 03 #Javascript
JavaScript实现select添加option
Jul 03 #Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 #Javascript
Javascript中的作用域和上下文深入理解
Jul 03 #Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 #Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 #Javascript
You might like
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Python对象体系深入分析
2014/10/28 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python字典简介以及用法详解
2016/11/15 Python
python实现图像识别功能
2018/01/29 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python hashlib加密实现代码
2019/10/17 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
基于python 取余问题(%)详解
2020/06/03 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
财务会计专业毕业生自荐信
2013/10/19 职场文书
环保倡议书300字
2014/05/15 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
感谢信的技巧及范例
2019/05/15 职场文书