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 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
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
Zend引擎的发展 [15]
2006/10/09 PHP
php日历[测试通过]
2008/03/27 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python实现GIF图倒放
2020/07/16 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
办护照工作证明范本
2014/01/14 职场文书
学生思想表现的评语
2014/01/30 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
500字小学生检讨书
2015/02/19 职场文书
百年孤独读书笔记
2015/06/29 职场文书
以下牛机,你有几个
2022/04/05 无线电