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 相关文章推荐
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
js数组去重的hash方法
2016/12/22 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
js评分组件使用详解
2017/06/06 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
快速查找Python安装路径方法
2020/02/06 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Java基础面试题
2012/11/02 面试题
《钱学森》听课反思
2014/03/01 职场文书
2014春晚主持词
2014/03/25 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
css3 文字断裂效果
2022/04/22 HTML / CSS