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 图片轮换效果
Jul 29 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
深入理解python多进程编程
2016/06/12 Python
Python生成密码库功能示例
2017/05/23 Python
python安装twisted的问题解析
2018/08/21 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python中url标签使用知识点总结
2020/01/16 Python
python模块如何查看
2020/06/16 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
求职简历的自我评价
2014/01/31 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
会计岗位职责范本
2014/03/07 职场文书
法制宣传教育方案
2014/05/09 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
大学毕业生个人总结
2015/02/28 职场文书
员工开除通知书
2015/04/25 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang