<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>textarea还剩余字数统计 - 懒人建站 http://www.51xuediannao.com/</title>

    <style type="text/css">

        body,a{ font-size: 14px; color: #555;;}

        .wordCount{ position:relative;width: 600px; }

        .wordCount textarea{ width: 100%; height: 100px;}

        .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}

        .wordCount .word{ color: red; padding: 0 4px;;}

    </style>

</head>

<body>

<h1>textarea还剩余字数统计</h1>

<p>textarea还剩余字数统计，支持复制粘贴的时候统计字数</p>

<div class="wordCount" id="wordCount">

    <textarea placeholder="textarea还剩余字数统计"></textarea>

    <span class="wordwrap"><var class="word">200</var>/200</span>

</div>

<span id="clock"></span>

<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

<script>

    $(function(){

        //先选出 textarea 和 统计字数 dom 节点

        var wordCount = $("#wordCount"),

                textArea = wordCount.find("textarea"),

                word = wordCount.find(".word");

        //调用

        statInputNum(textArea,word);

    });

    /*

     * 剩余字数统计

     * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>

     */

    function statInputNum(textArea,numItem) {

        var max = numItem.text(),

                curLength;

        textArea[0].setAttribute("maxlength", max);

        curLength = textArea.val().length;

        numItem.text(max - curLength);

        textArea.on('input propertychange', function () {

            var _value = $(this).val().replace(/\n/gi,"");

            numItem.text(max - _value.length);

        });

    }

</script>

<!--下面只是说明与程序代码无关-->

<div style="width:95%;padding:50px; font-size:14px; line-height:1.75;">

    <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>

    <a href="http://www.51xuediannao.com/">懒人建站-jquery特效-建站素材 http://www.51xuediannao.com/</a><br/>

    <span>我们为您提供-

    <a href="http://www.51xuediannao.com/html+css/">html+css</a>，

    <a href="http://www.51xuediannao.com/js/">jquery特效</a>，

    <a href="http://www.51xuediannao.com/js/">JS代码</a>，

    <a href="http://www.51xuediannao.com/js/texiao/">网页特效</a>，

    <a href="http://www.51xuediannao.com/js/nav/">导航菜单</a>，

    <a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a>，

    <a href="http://www.51xuediannao.com/sucai/">建站素材</a>

    <a class="link" title="大学生假期网上兼职挣点零花钱" href="http://www.51xuediannao.com/yumenba/wsjianzhi.html">大学生假期网上兼职挣点零花钱</a>

    </span>

    <span>懒人建站只收录实用和能提高用户体验的代码</span>

    <span>我们只想解放出你的部分写代码时间来思考更高层次的设计。</span>

</div>

</body>

</html>

　　

textarea还剩余字数统计，支持复制粘贴的时候统计字数的更多相关文章

  1. textarea还剩余字数统计

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

  2. 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  3. 不注册COM在Richedit中使OLE支持复制粘贴

    正常情况下在Richedit中使用OLE,如果需要OLE支持复制粘贴,那么这个OLE对象必须是已经注册的COM对象. 注册COM很简单,关键问题在于注册时需要管理员权限,这样一来,如果希望APP做成绿 ...

  4. firefox浏览器不支持复制粘贴（linux）

    在Linux主机下使用firefox在线编辑文章时,提示不支持复制粘贴选项,并给出了解决方法,记录一下 1.先找到本机firefox的配置文件的所在文件夹位置,不知道的请遵循以下步骤 点击菜单栏的帮助 ...

  5. jumpserver堡垒机web终端支持复制粘贴功能

    公司最近内部搭建了一个jumpserver堡垒机,但是web终端连接Windows时候没法复制粘贴文字文本 然后找了一下jumpserver官方说明没找到相应的说明,但是知道是guacamole这个组 ...

  6. 限制textarea的字数（包括复制粘贴）

    <textarea cols="100%" rows="10" id="tuconent" placeholder="评价( ...

  7. 支持复制粘贴word图片的文本编辑器

    下载并打开基于PHP环境的工程: 运行: 尝试使用文档复制后粘贴进来:   通过粘贴后,文档以及图片被粘贴进来了,看看html代码: 由此可看出图片全部使用img标签统一. 看看文档图片被放置在哪了: ...

  8. 让富文本编辑器支持复制doc中多张图片直接粘贴上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  9. centos 支持复制与粘贴

    centos 要支持与主机的交互,vmtools 必不可少. 为了方便虚拟机和主机之间复制粘贴文件,拖拽文件,需要安装VMwareTools.下面将我的安装步骤记录如下:第一步:打开虚拟机后,在VM的 ...

随机推荐

  1. Android Studio 之 ROM【3】，LiveData+ViewModel+AsyncTask+Repository+RecyclerView

    教程地址:https://www.bilibili.com/video/av65180549 源码地址:https://github.com/longway777/Android-2019-Tutor ...

  2. prometheus安装(docker)

    参考:https://github.com/songjiayang/prometheus_practice https://github.com/kjanshair/docker-prometheus ...

  3. express框架，使用 static 访问 public 内静态文件

    使用 express 生成 node 服务器后,我们需要访问放在public文件夹内的静态文件,如上传的图片 我们需要在app.js中添加配置项: app.use('/public',express. ...

  4. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

  5. SQL语句替换某个字段的部分数据

    update `表名` set `字段`= replace(字段, '旧数据', '新数据');

  6. [转帖]java注解核心知识总结

    java注解核心知识总结 2019-11-01 20:39:50 从事Java 阅读数 2  收藏 文章标签: java注解总结程序员 更多 分类专栏: java 注解   版权声明:本文为博主原创文 ...

  7. 桥接(Bridge)模式

    桥接模式又称为柄体模式或接口模式.桥接模式的用意就是"将抽象化与实现化解耦,使得二者可以独立变化". 抽象化: 存在于多个实体中的共同的概念性联系,就是抽象化.作为一个过程,抽象化 ...

  8. 【mysql】新增列 时间戳

    参考地址:https://www.cnblogs.com/SZxiaochun/p/9299392.html ALTER TABLE worksheet_data_12 ), ADD COLUMN ` ...

  9. http的GET方法参数中不能传列表，接收端的key会变

    如下 async initTable() { await getHostAttributesForUser({'username': this.username}).then(response =&g ...

  10. 文件的读取（txt文件）

    一.将读取文件夹内容,变为字典保存,代码如下: def read_class_names(class_file_name): '''loads class name from a file''' na ...