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 instanceof 的使用方法示例介绍
Oct 23 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
关于vue中如何监听数组变化
Apr 28 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
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Firefox div高度自适应
2009/04/28 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python多线程和队列操作实例
2015/06/21 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
3分钟学会一个Python小技巧
2018/11/23 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python requests模块session代码实例
2020/04/14 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
小学生感恩演讲稿
2014/04/25 职场文书
法律专业自荐信
2014/06/03 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书