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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
使用angular写一个hello world
Jan 23 Javascript
js中数组的常用方法小结
Dec 30 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
基于jQuery拖拽事件的封装
Nov 29 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实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python如何查看系统网络流量的信息
2016/09/12 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python如何实现强制数据类型转换
2019/11/22 Python
django model通过字典更新数据实例
2020/04/01 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
iPython pylab模式启动方式
2020/04/24 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python 实现一个简单的web服务器
2021/01/03 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python中的unittest框架实例详解
2021/02/05 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
小学毕业感言150字
2014/02/05 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
结婚通知短信大全
2015/04/17 职场文书
党员个人承诺书
2015/04/27 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js