<!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. 创维(Skyworth)电视 & 小米盒子3增强版

    创维(Skyworth)电视 型号:43G7200(8H87) 品类:GLED Air TV OS:酷开64位6.20.80601-806061  兼容Android L CPU:四核 Cortex ...

  2. Scala 在挖财的应用实践

    编者按:本文是根据ArchSummit 大会上挖财资深架构师王宏江的演讲<Scala 在挖财的应用实践>整理而成. 这次分享有三个方面,一是介绍一下挖财当前的开发情况和后端的架构, 二是挖 ...

  3. Python爬虫爬取BT之家找电影资源

    一.写在前面 最近看新闻说圣城家园(SCG)倒了,之前BT天堂倒了,暴风影音也不行了,可以说看个电影越来越费力,国内大厂如企鹅和爱奇艺最近也出现一些幺蛾子,虽然目前版权意识虽然越来越强,但是很多资源在 ...

  4. JSON Template

    public java.lang.String toString() {#if ( $members.size() > 0 ) #set ( $i = 0 )return "{\&qu ...

  5. 【操作系统之五】Linux常用命令之grep

    一.概念grep(Global search Regular Expression and Print out the line)强大的文本搜索工具,从文本文件或管道数据流中筛选匹配的行及数据,并把匹 ...

  6. mapReduce 大数据离线分析

    数据分析一般分为两种,一种是在线一种是离线 流程: 一般都是对于日志文件的采集和分析 场景实例(某个电商网站产生的用户访问日志(access.log)进行离线处理与分析的过程) 1.需求: 基于Map ...

  7. 蚂蚁金服2019实习生面经总结(已拿口头offer)

    一面 (37 分钟左右) 一面是上海的小哥打来的,3.12 号中午确认的内推,下午就打来约时间了,也是唯一一个约时间的面试官.约的晚上八点.紧张的一比,人生第一次面试就献给了阿里. 幸运的是一面的小哥 ...

  8. 整合去除HTML 标签， 去除开头结尾换行，将连续空格合并为一个

    文本是从编辑器中读取数据,有的时候,可能不需要显示格式这个时候需要去除HTML 标签,只引入其中的文本 //去掉html标签 function removeHtmlTab(tab) { return ...

  9. Linux时间日期类，压缩和解压类

    一.时间日期类 1.data指令 1.基本指令 date 显示当前日期 data +%Y 显示当前年份 data +%m 显示当前月份 data +%d 显示当前天 data +%Y-%m-%d %H ...

  10. MyEclipse部署外部引用的jar到web-inf的lib目录下

    在用MyEclipse开发java web项目的时候,引入了外部jar,都是以library的形式存在左边的explore中的,调试没有问题,但是部署之后呢,经常遇到个非常头疼的问题就是,这些jar不 ...