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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
简单的js计算器实现
2016/10/26 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Numpy数组转置的两种实现方法
2018/04/17 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
公司业务员岗位职责
2014/03/18 职场文书
求职信名称怎么写
2014/05/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
工作推荐信模板
2015/03/25 职场文书
入党团支部推荐意见
2015/06/02 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
Python图片处理之图片裁剪教程
2021/05/27 Python