<!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. 运维-kibana常用查询使用

    1.登录服务器地址 http://kibana.ops.xxx.com.cn/ 查询语法: 支持 AND ,  OR, && || >,<  ,=模糊 *,! 1.如查询n ...

  2. 【python学习案例】python判断自身是否正在运行

    需要引入psutil包: 实现思路: 1)用os.getpid()获取当前程序运行PID,将PID存入文件中 2)用psutil模块获取当前系统所有正在运行的pid 3)读取之前存入的PID,判断该P ...

  3. 《Linux就该这么学》自学笔记_ch21_使用Git分布式版本控制系统

    <Linux就该这么学>自学笔记_ch21_使用Git分布式版本控制系统 文章主要内容: 分布式版本控制系统 使用Git服务程序 提交数据 移除数据 移动数据 历史记录 还原数据 管理标签 ...

  4. osx或windows系统下，用ftp上传文件到阿里云虚拟主机脚本

    某天突然发现,一直在用的ftp工具并不好用,操作界面太过繁琐,而且不太稳定.于是自己找资料,整合了几句虽然简单,但是方便的代码. mac脚本 #从本地向FTP批量上传文档 需要赋予该.shell文件权 ...

  5. 阉割的List

    实在忍不住,模仿STL写了个阉割版的List,还没加迭代器,等搞完STL源码再说吧. #pragma once #include <stdexcept> namespace vlyf { ...

  6. html5点击input没有出现光标完美解决方案

    html5点击input没有出现光标完美解决方案 <pre> <input type="text" placeholder="输入姓名" cl ...

  7. Java利用IText导出PDF（更新）

    我很久以前写的还是上大学的时候写的:https://www.cnblogs.com/LUA123/p/5108007.html ,今天心血来潮决定更新一波. 看了下官网(https://itextpd ...

  8. Java笔记_web.xml文件

    在JavaEE工程中,web.xml文件是用来初始化配置信息:比如Welcome页面.servlet.servlet-mapping.filter.listener.启动加载级别等,但并不是必须的,一 ...

  9. Windows server 2012 显示“我的电脑”

    Windows server 2012 桌面上默认没有显示“我的电脑”的快捷方式, 如果要显示,可以输入一行命令: rundll32.exe shell32.dll,Control_RunDLL de ...

  10. 【java】java删除文件delete和deleteOnExit 方法的区别，为什么调用deleteOnExit无效？

    delete() 是即刻删除 public boolean delete() { SecurityManager security = System.getSecurityManager(); if ...