<!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. 配置keepalived支持nginx高可用

    实验环境 序号 主机名 IP地址 1 nginx1 192.168.204.11 2 nginx2 192.168.204.12 安装nginx 安装nginx yum install -y epel ...

  2. shell（一） shell变量

    基本介绍 变量命名规范 变量名要求由字母.数字.下划线组成,尽量字母开头,有明确含义 注意:变量赋值时,等号前后不能有空格,变量名称不能和字体变量冲突 自定义变量 当前shell有效 1.定义变量 v ...

  3. Nginx 整合 Lua 实现动态生成缩略图

    原文地址:Nginx 整合 Lua 实现动态生成缩略图 博客地址:http://www.extlight.com 一.前提 最近在开发一个项目,涉及到缩略图的功能,常见的生成缩略图的方案有以下几个: ...

  4. Python【每日一问】18

    问: [基础题]:请解释新式类跟经典类,并说明它们的区别[提高题]:请解释Python垃圾回收机制 答: [基础题]:请解释新式类跟经典类,并说明它们的区别 1.新式类都是继承内置 object 对象 ...

  5. Linux内核模块管理命令

    1.insmod命令 在Linux系统下,insmod命令用于将给定的模块加载到内核中去,Linux系统有许多功能是通过模块的方式,在需要时才载入kernel,这样做可以使kernel较为精简,进而提 ...

  6. 修改Centos7用户默认家目录

    vim /etc/default/useradd # useradd defaults file GROUP= HOME=/home INACTIVE=- EXPIRE= SHELL=/bin/bas ...

  7. 14. Scala使用递归的方式去思考，去编程

    14.1 基本介绍 -Scala饰运行在Java虚拟机(Java Virtual Machine)之上,因此具有如下特点 1) 轻松实现和丰富的Java类库互联互通 2) 它既支持面向对象的编程方式, ...

  8. kubernetes 1.15 有哪些让人眼前一亮的新特性？

    原文链接:kubernetes 1.15 有哪些让人眼前一亮的新特性? 2019 年 6 月 20 日,Kubernetes 重磅发布了 1.15 版本,不过笔者忙到现在才有空认真来看一下到底更新了哪 ...

  9. SQL 查询表外键_T-Sql 2016——级联删除外键查询

    SELECT fk.name AS foreign_key_name, oSub.name AS table_name, SubCol.name AS table_column, oMain.name ...

  10. Git 多人协作 以及推送分支

    参考链接:https://www.liaoxuefeng.com/wiki/896043488029600/900375748016320 当你从远程仓库克隆时,实际上Git自动把本地的仓库的mast ...