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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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
2019十大人气国漫
2020/03/13 国漫
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
详解django中使用定时任务的方法
2018/09/27 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
简单的命令查看安装的python版本号
2020/08/28 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
班级入场式解说词
2014/02/01 职场文书
授权委托书
2014/09/17 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
医生行业员工的辞职信
2019/06/24 职场文书