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 浮动广告实现代码
Dec 25 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
jQuery实现简单三级联动效果
Sep 05 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
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
艾滋病宣传标语
2014/06/25 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
个人简历求职信范文
2015/03/20 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server