<!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. json for modern c++(nlohmann json)使用小计

    前言 一开始使用jsoncpp,但是jsoncpp已经不更新了,nlohmann还在更新,并且jsoncpp做过一次大的版本升级,导致api不兼容,以前使用过的工程代码不能很好的升级到新的版本,并且j ...

  2. Spring Transaction 使用入门 （转）

    Spring Transaction 使用入门 一.开篇陈述 1.1 写文缘由 最近在系统学习spring框架IoC.AOP.Transaction相关的知识点,准备写三篇随笔记录学习过程中的感悟.这 ...

  3. websocket通信1009错误，

    问题说明: springboot继承 WebSocketConfigurer实现websocket通信服务,服务器端报错,"The decoded text message was too ...

  4. SuperMemo

    SuperMemo Your friend, Jackson is invited to a TV show called SuperMemo in which the participant is ...

  5. 你不知道的js——数组 join

    你可能对使用数组的 join 方法已经轻车熟路,但你也许不知道: 10.If element0 is undefined or null, let R be the empty String; oth ...

  6. javascript的立即执行函数

    在javascript中有引入立即执行函数的概念,那么什么是立即执行函数呢?立即执行函数又是怎么写的呢?立即执行函数与普通函数有什么区别呢? 先来看看一般的函数: function a(){ var ...

  7. idea 2019.2 版本把菜单栏隐藏了恢复办法

    一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...

  8. Java 中常见的 final 类

    Java 中常见的 final 类 java.lang 包 public final class Boolean extends Object implements Serializable, Com ...

  9. 大一C语言课程设计——班级档案管理系统

    记录我在大一第二学期期末做的C语言课程毕业设计 1. 班级档案管理系统运用到的主要结构体 typedef struct birthday //出生日期{int year;int month;int d ...

  10. 如何查找YUM安装的JAVA_HOME环境变量详解

    如何查找YUM安装的JAVA_HOME环境变量详解  更新时间:2017年10月27日 09:44:56   作者:铁锚   我要评论 这篇文章主要给大家介绍了关于如何查找YUM安装的JAVA_HOM ...