内容链接地址：http://www.cnblogs.com/jone-chen/p/5213851.html；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jquery插件——仿新浪微博限制输入字数的textarea</title> 6 <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script> 7 <style> 8 *{padding: 0;margin: 0;} 9 .box{width: 800px;margin: 0 auto;} 10 #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;;} 11 #info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;} 12 </style> 13 </head> 14 <body> 15 <div class="box"> 16 <textarea id="test" width="100%"></textarea> 17 </div> 18 <script> 19 (function($) { 20 $.fn.limitTextarea = function(opts) { 21 var defaults = { 22 maxNumber: 140, //允许输入的最大字数 23 position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方 24 onOk: function() {}, //输入后，字数未超出时调用的函数 25 onOver: function() {} //输入后，字数超出时调用的函数 26 } 27 var option = $.extend(defaults, opts); 28 this.each(function() { 29 var _this = $(this); 30 var info = '<div id="info"><b>' + (option.maxNumber - _this.val().length) + '</b>/'+option.maxNumber+'</div>'; 31 var fn = function() { 32 var $info = $('#info'); 33 var extraNumber = option.maxNumber - _this.val().length; 34 35 if (extraNumber >= 0) { 36 $info.html('<b>' + extraNumber + '</b>/'+option.maxNumber); 37 option.onOk(); 38 } else { 39 $info.html('已经超出<b style="color:red;">' + (-extraNumber) + '</b>个字'); 40 option.onOver(); 41 } 42 }; 43 switch (option.position) { 44 case 'top': 45 _this.before(info); 46 break; 47 case 'bottom': 48 default: 49 _this.after(info); 50 } 51 //绑定输入事件监听器 52 if (window.addEventListener) { //先执行W3C 53 _this.get(0).addEventListener("input", fn, false); 54 } else { 55 _this.get(0).attachEvent("onpropertychange", fn); 56 } 57 if (window.VBArray && window.addEventListener) { //IE9 58 _this.get(0).attachEvent("onkeydown", function() { 59 var key = window.event.keyCode; 60 (key == 8 || key == 46) && fn(); //处理回退与删除 61 }); 62 _this.get(0).attachEvent("oncut", fn); //处理粘贴 63 } 64 }); 65 } 66 })(jQuery) 67 //插件调用； 68 $(function() { 69 $('#test').limitTextarea({ 70 maxNumber: 140, //最大字数 71 position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方 72 onOk: function() { 73 $('#test').css('background-color', 'white'); 74 }, //输入后，字数未超出时调用的函数 75 onOver: function() { 76 $('#test').css('background-color', 'lightpink'); 77 } //输入后，字数超出时调用的函数，这里把文本区域的背景变为粉红色 78 }); 79 }); 80 </script> 81 </body> 82 </html>