<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>textarea还剩余字数统计</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 () {

            numItem.text(max - $(this).val().length);

        });

    }

</script>

</body>

</html>

　　

js文本框字数限制的更多相关文章

  1. 基于jQuery的计算文本框字数的代码-jquery

    用户边输入计算同时进行,告诉用户还剩余多少可输入的字数,当超过规定的字数后,点击确定,会让输入框闪动 一.功能:  1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数;  2.当超过规定的字数 ...

  2. [js开源组件开发]js文本框计数组件

    js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...

  3. 修改input和textarea的placeholder的颜色，限制文本框字数输入

    <style type="text/css"> textarea{ width: 400px; height:400px; resize: none; } .limit ...

  4. JS控制输入框和文本框字数

    文本框限制字数: HTML结构: JS: $('.advert-title').each(function(){ var TXTlength = $(this).text().length; // 当 ...

  5. js文本框字符数输入限制

    我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...

  6. 记录Js 文本框验证 与 IE兼容性

    最近的日常就是将测试小姐姐提交的bug进行修改,想来这种事情还是比较好开展的,毕竟此项目已上线一年多,现在只是一些前端的问题需要改正.实际上手的时候并不是这样,原项目是在谷歌上运行,后来由于要新增一个 ...

  7. [JS] 文本框判断输入的内容是否为数字

    可以通过触发文本框的onchange事件来对输入的内容进行判断是否为数字 文本框的属性设置: 把onchange的属性对应的js函数写好即可 参数传输的是当前控件的value值,即text值 < ...

  8. js文本框验证

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  9. JS文本框获取焦点

    所谓焦点,就是鼠标移上文本框的时候那个一闪一闪的光标.

随机推荐

  1. 算法题目-记hulu失败的实习面试

    1.对于数组A[0,1,2,3,4,...,k],求得0<=i < j < k,且使得A[j] - A[i]为最大值. 最简单也最容易想到的搜索两遍,即可得到答案.i的位置从起始至倒 ...

  2. 使用sql语句删除数据库中重复的数据

    在数据库中有一批数据,但是由于数据入库之前某些不当的操作引入了一些重复的数据,需要将这些重复的数据删除.数据的结构大概是下面的样子 CREATE TABLE [dbo].[aaa]( [id] [in ...

  3. 【CF687D】Dividing Kingdom II 线段树+并查集

    [CF687D]Dividing Kingdom II 题意:给你一张n个点m条边的无向图,边有边权$w_i$.有q个询问,每次给出l r,问你:如果只保留编号在[l,r]中的边,你需要将所有点分成两 ...

  4. Linguistic Data Consortium (LDC)

    搞NLP的人经常会听到一个神秘的名字LDC,因为大量的论文所使用的数据都来自于LDC,本文就来揭露其神秘面目. About LDC: LDC,全名Linguistic Data Consortium, ...

  5. 9.21 form 和Ajax详解

    form 表单 参考连接  : http://www.cnblogs.com/liwenzhou/p/8747872.html

  6. Solve minGW g++ has stopped working 程序停止运行

    之前在机子装了个很早版本的MinGW,苦于不支持c++11,所以打算卸载掉安装个新版本的.可是网上找了很多版本装好后,编译成功,运行的时候总是弹出 *.exe has stopped working的 ...

  7. 使用Properties配置文件 InputStream与FileReader (java)

    java 开发中,常常通过流读取的方式获取 配置文件数据,我们习惯使用properties文件,使用此文件需要注意 文件位置:任意,建议src下 文件名称:任意,扩展名为properties 文件内容 ...

  8. Java-06-动手动脑

    1.为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来? 因为子类继承于父类,子类中有父类的对象,父类的构造方法初始化后,子类才能运行自己的构造方法 不能放过来,继 ...

  9. PPTP不使用远程网关访问公网设置

    使用PPTP拨号的时候默认使用PPTP远程网关访问公网,通过以下设置可以禁止远程网关访问公网 1,右下角选择网络图标右键-属性 2,选择网络IPv4属性,选择属性 3,点击高级选项 4,在远程网络上使 ...

  10. POJ 1185 - 炮兵阵地　&　HDU 4539 - 郑厂长系列故事——排兵布阵　-　[状压DP]

    印象中这道题好像我曾经肝过,但是没肝出来,现在肝出来了也挺开心的 题目链接:http://poj.org/problem?id=1185 Time Limit: 2000MS Memory Limit ...