内容链接地址：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. fork和僵尸进程

    1. 关于fork fork()函数: 用于创建一个进程,所创建的进程复制父进程的代码段/数据段/BSS段/堆/栈等所有用户空间信息:在内核中操作系统重新为其申请了一个PCB,并使用父进程的PCB进行 ...

  2. iOS开发（4）：录音AVAudioRecorder

    录音,声音的采集,一般有两种实现办法,一是使用AVAudioRecorder,一是使用AudioUnit.如果只是简单的录音,使用AVAudioRecorder就可以了,如果想更灵活地处理刚录到的声音 ...

  3. Spark学习之路（十四）—— Spark Streaming 基本操作

    一.案例引入 这里先引入一个基本的案例来演示流的创建:获取指定端口上的数据并进行词频统计.项目依赖和代码实现如下: <dependency> <groupId>org.apac ...

  4. Electron为文件浏览器创建图标(三)

    在前面的文章中,请看之前文章,我们已经完成了使用 electron做文件浏览器这么一个应用,现在我们需要为应用创建图标操作.为应用创建图标以后,我们就可以从计算机中与其他应用区分开来,如果我们自己会做 ...

  5. 【分页工具-spring boot】Mybatis PageHelper 集成Spring boot

    官方文档:https://github.com/pagehelper/pagehelper-spring-boot 1.引入包,测试过以下版本兼容性还是比较好的 <!--Mybatis-Spri ...

  6. redis在asp.net 中的应用

    1.redis介绍 Nosql数据库作为关系型数据库的补充,在互联网公司已经得到广泛的运用.redis便是其中的代表之一,redis是一种(key,value)基于内存的数据库,并支持多种数据结构,如 ...

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

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

  8. 黑马程序员_ADO.Net（ExecuteReader，Sql注入与参数添加，DataSet，总结DataSet与SqlDataReader ）

    转自https://blog.csdn.net/u010796875/article/details/17386131 一．执行有多行结果集的用ExecuteReader SqlDateReader  ...

  9. 使用 Mybatis 框架 jdbc 方式批量写入 SQL Server，报错 com.microsoft.sqlserver.jdbc.SQLServerException 传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确。此 RPC 请求中提供了过多的参数，最多应为2100

    这个错是sqlserver抛出来的. 进过验证,上述错误中的2100为插入的总字段数. 比如下面这种插入方式,values后面的一个括号里的字段为30个,那么后面最多只能加70条,即这种批量插入方式一 ...

  10. 配置Python虚拟环境

    最小化安装的centos7中并没有安装python3 1.安装python3 1)下载安装包: wget https://www.python.org/ftp/python/3.6.2/Python- ...