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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
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
php代码把全角数字转为半角数字
2007/12/10 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python实现决策树分类(2)
2018/08/30 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Python3实现飞机大战游戏
2020/04/24 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
个人充满哲理的自我评价
2014/02/20 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
出国留学自荐信模板
2015/03/06 职场文书
让世界充满爱观后感
2015/06/10 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
Linux磁盘管理方法介绍
2022/06/01 Servers