内容链接地址：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. 简洁的描述SpringMVC工作流程

    1.客户端发送来的请求 经过前端控制器(springDispatcherServlet)调用映射器(HandlerMapping)来找到对应的执行链(HandlerExecutionChain)对象, ...

  2. Unity Shader 玻璃效果

    一个玻璃效果主要分为两个部分,一部分是折射效果的计算,另一部分则是反射.下面分类进行讨论: 折射: 1.利用Grass Pass对当前屏幕的渲染图像进行采样 2.得到法线贴图对折射的影响 3.对采集的 ...

  3. Unity Shader常用函数，标签，指令，宏总结（持续更新）

    极端常用: UnityObjectToClipPos(v.vertex); 最基本的顶点变换,模型空间 ==>裁剪空间 mul(unity_ObjectToWorld, v.vertex); 顶 ...

  4. SpringBoot中资源初始化加载的几种方式（看这一片就够了）

    一.问题 在平时的业务模块开发过程中,难免会需要做一些全局的任务.缓存.线程等等的初始化工作,那么如何解决这个问题呢?方法有多种,但具体又要怎么选择呢? 二.资源初始化 1.既然要做资源的初始化,那么 ...

  5. Hadoop 学习之路（一）—— 分布式文件系统 HDFS

    一.介绍 HDFS (Hadoop Distributed File System)是Hadoop下的分布式文件系统,具有高容错.高吞吐量等特性,可以部署在低成本的硬件上. 二.HDFS 设计原理 2 ...

  6. Mac sublime text3 安装插件

    一.下载Mac版sublime text3 下载地址:http://www.pc6.com/mac/120663.html(参考) 2.安装后打开 1.在界面的最上端找到tools(英文版),选择第一 ...

  7. 监控redis的操作命令

    查看redis客户端的操作记录,即~/.rediscli_history. ls /home/*/.rediscli* 但是看不到代码操作redis的记录,只是redis-cli的记录.可以用moni ...

  8. （一）C#编程基础复习——开启编程之旅

    回想当年学习编程,刚开始学习是非常艰苦的,可能是因为文科生原因,刚开始接触工科类的知识不是很擅长,上去大学第一年基本没有好好学习编程,入门C#编程基础一窍不通,也许那时年少无知,第二学期开始奋发图强, ...

  9. SpringCloud解析之Ribbon

    Ribbon是分布式微服务架构中负载均衡的一个解决方案,我们只需要引入ribbon依赖,然后初始化一个RestTemplate对象,在其上添加@LoadBalanced注解,就可以实现请求的负载均衡, ...

  10. MYSQL Got error 28 from storage engine

    网络查找该异常信息,发现 Got error 28 from storage engine 查了一下,数据库文件所在的盘应该没事,应该是数据库用的临时目录空间不够 引用 磁盘临时空间不够导致. 解决办 ...