jquery插件——仿新浪微博限制输入字数的textarea

内容链接地址：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 >;
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>
jquery插件——仿新浪微博限制输入字数的textarea

相关推荐
