内容链接地址：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. python-基本数据类型（int,bool,str）

    一.python基本数据类型 1. int ==>  整数. 主要⽤用来进⾏行行数学运算 2. str ==> 字符串串, 可以保存少量量数据并进⾏行行相应的操作 3. bool==> ...

  2. CI框架使用（一）

    CI框架的使用是很简单,也 是mvc模式.其中有好多类直接调用.   在使用帮助函数的时候,都需要手动加载,或者是在配置文件中加一个自动加载 $this->load->helper('ur ...

  3. 手把手docker部署java应用（初级篇）

    本篇原创发布于 Flex 的个人博客:点击跳转 前言   在没有 docker 前,项目转测试是比较麻烦的一件事.首先会化较长的时间搭建测试环境,然后在测试过程中又经常出现测试说是 bug,开发说无法 ...

  4. eclipse下jdbc数据源与连接池的配置及功能简介

    今天在做四则运算网页版的时候遇到了一个困惑,由于需要把每个产生的式子存进 数据库,所以就需要很多次重复的加载驱动,建立连接等操作,这样一方面写程序不方便,加大了程序量,另一方面,还有导致数据库的性能急 ...

  5. 移动端布局（viewport）方法

    viewport默认有6个属性 width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度详),这里可以为一个整数,又或者是字符串"width-device" ini ...

  6. 02-三种Bean装配机制（三）

    在前两篇中分别介绍了自动化装配机制和通过JavaConfig类进行装配,接下来介绍下通过XML装配bean,其实就目前趋势来看,这种方式用的越来越少(不是我说的,是作者说的,喜欢这种方式的别喷我

  7. HDU 1542：Atlantis（扫描线+线段树 矩形面积并）***

    题目链接 题意 给出n个矩形,求面积并. 思路 使用扫描线,我这里离散化y轴,按照x坐标从左往右扫过去.离散化后的y轴可以用线段树维护整个y上面的线段总长度,当碰到扫描线的时候,就可以统计面积.这里要 ...

  8. 使用JavaScript实现量化策略并发执行——封装Go函数

    在实现量化策略时,很多情况下,并发执行可以降低延时提升效率.以对冲机器人为例,需要获取两个币的深度,顺序执行的代码如下: 请求一次rest API存在延时,假设是100ms,那么两次获取深度的时间实际 ...

  9. 5. xadmin 后台搭建

    要维护他人产权,就不喽了,直接飞机 Django1.11.11使用xadmin的方法(一: 快速安装篇):https://www.jianshu.com/p/bcb74595213e Django1. ...

  10. Bzoj 3166 [Heoi2013] Alo 题解

    3166: [Heoi2013]Alo Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1118  Solved: 518[Submit][Status ...