字数统计功能,原理是给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字数统计的更多相关文章

  1. 工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

    去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...

  2. textarea还剩余字数统计

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  3. ios开发之--textview意见反馈页面(占位label,字数统计,提交按钮的交互设置)

    记录一个页面的功能: textview的占位符,字数统计,提交按钮的交互设置,具体效果图如下:

  4. HDU1735 字数统计

    版权声明:长风原创 https://blog.csdn.net/u012846486/article/details/28011667 字数统计 Time Limit: 1000/2000 MS (J ...

  5. HDU 1735 字数统计(模拟+一点点贪心的思想)

    题目戳我 字数统计 Time Limit: 1000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  6. Hexo添加字数统计、阅读时长

    统计插件 配置 NexT 主题默认已经集成了文章[字数统计].[阅读时长]统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可.如下所示: ...

  7. 【百度编辑器ueditor】工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

    去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...

  8. textarea还剩余字数统计,支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. js 实现textarea剩余字数统计

    1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...

随机推荐

  1. sublime text之sublimeCodeIntel 的配置

    sublimeCodeIntel 的配置 智能提示插件,这个插件的智能提示功能非常强大,可以自定义提示的内容库,我的Python智能提示设置(配置文件路径为packages\SublimeCodeIn ...

  2. activiti工作流的web流程设计器整合视频教程

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...

  3. MySQL的常规操作

    MySQL的常规知识 show 查看数据库 show databases; 查看表 存在的所有表 show tables; 创建表的命令 show create table table_name; 表 ...

  4. 【初探HTML本相】道之真谛不过自然,html标签脱俗还真

    前言 须弥般若有无空,阴阳道化真虚同:洗尽前恩本非相,还吾面目下九重. 咳咳,其实老夫对佛教文化有点点研究啦,说以我们这里来了一点很有哲理的东西,因为我这里准备干一件很戳的事情,我准备来看看我们的ht ...

  5. JavaScript——99乘法表

    <!DOCTYPE html> <html> <head> <title>99乘法表</title> <style type=&quo ...

  6. NodeJS API简介

    简单介绍下NodeJS现有API. Assert(断言):该模块用于编写程序的单元测试用例. Buffer(缓冲块) :处理二进制数据. C/C++ Addons(拓展):Addons插件就是动态连接 ...

  7. ArcGIS空间分析工具

    1. 3D分析 1.1. 3D Features toolset 工具 工具 描述 3D Features toolset (3D 要素工具集) Add Z Information 添加 Z 信息 添 ...

  8. Atitit.iso格式蓝光 BDMV 结构说明

    Atitit.iso格式蓝光 BDMV 结构说明 1. Iso是个复合文件1 2. Iso内部格式如下1 2.1. Bdmv文件夹格式 BDMV(Blu-ray Disk Movie.BD-MV),为 ...

  9. XMPP学习——3、XMPP协议学习补充

    流基础 两个基本概念,使得XMPP实体之间的小的结构化信息有效载荷能快速地进行异步交换:XML流和XML节.这些术语的定义如下. XML流的定义: XML流是一个容器,用于任何两个实体通过网络进行XM ...

  10. iOS开发UINavigation——导航控制器UINavigationController

    iOS开发UINavigation系列一——导航栏UINavigtionBar摘要iOS中的导航条可以附着于导航控制器之中使用,也可以在controller中单独使用,这篇博客,主要讨论有关导航栏的使 ...