内容链接地址：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. LVS-DR模式部署流程

    情景一 一.环境介绍 1)RIP.VIP.DIP为同一物理网络 2)LVS Hostname:lvs eth0:DIP-192.168.3.31 eth0:0:VIP-192.168.3.10 3)R ...

  2. SpringBoot实现文件上传

    前言参考:快速开发第一个SpringBoot应用 这篇文章会讲解如何使用SpringBoot完成一个文件上传的过程,并且附带一些SpringBoot开发中需要注意的地方 首先我们写一个文件上传的htm ...

  3. Django 强大的ORM之增删改查

    Django orm         Django——orm进阶 测试Django中的orm 表结构: models.py class User(models.Model): name = model ...

  4. MSVBVM60.dll中函数

    本文转载!!! 原文作者:飘云(飘云阁安全论坛) 原文地址:http://www.chinapyg.com/forum.php?mod=viewthread&tid=2225&high ...

  5. vim配置轻量级IDE

    安装VIM 安装YouCompleteMe的时候, 需要VIM的版本比较高, 一般一些Linux长期支持版的Vim包就比较老, 所以可能需要编译安装. 卸载之前系统中安装的版本: CentOS/Fed ...

  6. lower_bound 和 upper_bound 功能和用法

    以前用这两个函数的时候,简单看了几句别人的博客,记住了大概,用的时候每用一次就弄混一次,相当难受,今天对照着这两个函数的源码和自己的尝试发现:其实这两个函数只能用于 "升序" 序列 ...

  7. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  8. SwiftLint：代码规范检查工具介绍

    Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...

  9. django基础知识之定义模型:

    定义模型 在模型中定义属性,会生成表中的字段 django根据属性的类型确定以下信息: 当前选择的数据库支持字段的类型 渲染管理表单时使用的默认html控件 在管理站点最低限度的验证 django会为 ...

  10. Python 爬虫从入门到进阶之路（十八）

    在之前的文章我们通过 scrapy 框架 及 scrapy.Spider 类做了一个<糗事百科>的糗百爬虫,本章我们再来看一下相较于 scrapy.Spider 类更为强大的 CrawlS ...