内容链接地址：http://www.cnblogs.com/jone-chen/p/5213851.html；

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jquery插件——仿新浪微博限制输入字数的textarea</title>

 <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>

 <style>

     *{padding: 0;margin: 0;}

     .box{width: 800px;margin: 0 auto;}

     #test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display: block; width: 98%; height: 80px;;}

     #info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;}

 </style>

 </head>

 <body>

 <div class="box">

     <textarea id="test" width="100%"></textarea>

 </div>

 <script>

     (function($) {

         $.fn.limitTextarea = function(opts) {

             var defaults = {

                 maxNumber: 140, //允许输入的最大字数

                 position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方

                 onOk: function() {}, //输入后，字数未超出时调用的函数

                 onOver: function() {} //输入后，字数超出时调用的函数

             }

             var option = $.extend(defaults, opts);

             this.each(function() {

                 var _this = $(this);

                 var info = '<div id="info"><b>' + (option.maxNumber - _this.val().length) + '</b>/'+option.maxNumber+'</div>';

                 var fn = function() {

                     var $info = $('#info');

                     var extraNumber = option.maxNumber - _this.val().length;

                     if (extraNumber >= 0) {

                         $info.html('<b>' + extraNumber + '</b>/'+option.maxNumber);

                         option.onOk();

                     } else {

                         $info.html('已经超出<b style="color:red;">' + (-extraNumber) + '</b>个字');

                         option.onOver();

                     }

                 };

                 switch (option.position) {

                     case 'top':

                         _this.before(info);

                         break;

                     case 'bottom':

                     default:

                         _this.after(info);

                 }

                 //绑定输入事件监听器

                 if (window.addEventListener) { //先执行W3C

                     _this.get(0).addEventListener("input", fn, false);

                 } else {

                     _this.get(0).attachEvent("onpropertychange", fn);

                 }

                 if (window.VBArray && window.addEventListener) { //IE9

                     _this.get(0).attachEvent("onkeydown", function() {

                         var key = window.event.keyCode;

                         (key == 8 || key == 46) && fn(); //处理回退与删除

                     });

                     _this.get(0).attachEvent("oncut", fn); //处理粘贴

                 }

             });

         }

     })(jQuery)

     //插件调用；

     $(function() {

         $('#test').limitTextarea({

             maxNumber: 140, //最大字数

             position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方

             onOk: function() {

                 $('#test').css('background-color', 'white');

             }, //输入后，字数未超出时调用的函数

             onOver: function() {

                 $('#test').css('background-color', 'lightpink');

             } //输入后，字数超出时调用的函数，这里把文本区域的背景变为粉红色

         });

     });

 </script>

 </body>

 </html>

jquery插件——仿新浪微博限制输入字数的textarea的更多相关文章

  1. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  2. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

  3. jquery插件artTxtCount输入字数限制,并提示剩余字数

    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  4. jquery 限制字数 显示输入字数 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  6. jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  7. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  8. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  9. Jquery 限制文本框输入字数【转】

    <script type="text/javascript" src="js/jquery.min.js" ></script> < ...

随机推荐

  1. 【转】 远程连接mysql

    转自:http://www.linuxidc.com/Linux/2013-05/84813.htm 1.确认能ping通 2.确认端口能telnet通.如果user表的host值是localhost ...

  2. 打包成war包之后如何读取配置文件

    今天工作开发中遇到一个问题:在idea运行的项目读取配置文件没有问题,打包成war包之后就会报错java.io.FileNotFoundException: class path resource 原 ...

  3. SQL Server 2012完全备份、差异备份、事务日志备份和还原操作；

    SQL Server 2012完全备份.差异备份.事务日志备份和还原操作: 1.首先,建立一个测试数据库,TestA:添加一张表,录入二条数据:备份操作这里我就不详细截图和讲解了.相信大家都会备份,我 ...

  4. PATA 1006. Sign In and Sign Out (25)

    #include <bits/stdc++.h> using namespace std; const int N = 100005; struct visitor{ char ID[20 ...

  5. leadcode的Hot100系列--617. 合并二叉树

    合并,就是两个树的结构交集部分,数据相加,否则,取非空部分. 所以,这里相当于是对两棵树同时遍历: 如果两棵树节点都不为空,则数据相加, 否则,直接指针把不为空的节点复制过来. 注:这里没有申请内存, ...

  6. CentOS 网络互通情况下把一个Linux服务器的文件发送到另一个服务器

    scp -r  文件名/目录名 root@192.168.2.144:/home/hsw -r   发送目录使用,表示把该目录下的所有子目录以及文件发送过去

  7. VS2008 专业版试用到期破解 【转】

    对于在win7内核下的vs2008破解,和在xp内核系统下的破解是不同的.传统(XP)的破解方式: 一.先安装试用版,然后在“添加或删除程序”里找到VS2008,点“更改/删除”就会看到一个输入序列号 ...

  8. 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示

    需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...

  9. 音频算法speex中的aec分析以及解析

    算法原理: Speex的AEC是以NLMS(Normalized Least Mean Square)为基础,用MDF(multidelay block frequency domain)频域实现,最 ...

  10. Dijkstra算法与堆（C++）

    Dijkstra算法用于解决单源最短路径问题,通过逐个收录顶点来确保得到以收录顶点的路径长度为最短.      图片来自陈越姥姥的数据结构课程:https://mooc.study.163.com/l ...