微博输入框插件

来源：互联网发布：明星的淘宝店编辑：程序博客网时间：2024/06/03 23:14

/** * 微博计数输入框插件 * 属性说明： * counter 计数区的容器id * max 最大字符数，默认值为150 * textClass 指定文字的样式 * normalClass 指定未超过最大字数时数字样式 * errorClass 指定已超过最大字数时数字样式 * 2012/3/8 by 崔玥 */(function($){    $.fn.extend({        weiboInputBox: function(options) {    //插件名字            var defaults={                counter:"msg",    //计数容器id                max:150,                textClass:"textClass",                normalClass:"normalClass",                errorClass:"errorClass"            };            var options=$.extend(defaults,options);            return this.each(function() {                var o=options;    //得到配置参数                var obj=$(this);    //得到当前对象                $("#"+o.counter).addClass(o.textClass)                    .html("您可以输入<span class='"+o.normalClass+"'>"+o.max+"</span>字");                obj.bind("keypress",function(event){                    var l=obj.val().length+1;                    var maxlength=obj.attr("maxlength");                    if(l>maxlength){                        window.event.keyCode=0;                    }                });                obj.bind("keyup change",function(event){                    var val=obj.val();                    var vLength=val.length;                    //var addLen=(val.match(/[^\x00-\xff]|[\u4E00-\u9FA5]/g)||'').length;    //2个英文字符计为1个                    var addLen=val.length;    //1个英文字符计为1个                    var num=o.max-Math.ceil((vLength+addLen)/2);                                        if(num>=0){                        $("#"+o.counter).addClass(o.textClass)                            .html("您可以输入<span class='"+o.normalClass+"'>"+num+"</span>字");                    }else{                        $("#"+o.counter).addClass(o.textClass)                            .html("已超过<span class='"+o.errorClass+"'>"+Math.abs(num)+"</span>字");                    }                });            });        }    });})(jQuery);

自己写了一个类似新浪微博的计字数的输入框，由于IE浏览器的<textarea>标记不支持maxlength属性，所以在插件中使用了press键盘事件，在事件中检查字数，如果超过上限则强制将keyCode置为0，以达到maxlength属性的目的。但是这种方法对复制、粘贴是无能为力的，所以对这种情况还是使用了截取字符串的方式，感觉还是有些缺憾，望大家提供些思路。

调用时，要指定计数区域的一个容器id，比如是一个<div>标记，这样才可以把计数的信息显示出来。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <script src="jquery.js"></script>  <script src="weibotextbox.js"></script>  <style type="text/css">  .normal{font-size:14px;color:#000000;}  .text{font-size:18px;color:#0000FF;font-family:Garamond;}  .error{font-size:18px;color:#FF0000;font-family:Garamond;}  </style> </HEAD> <BODY><div id="counter"></div><textarea class="textarea" id="summary" maxlength="20" row="3" col="20"></textarea> <script type="text/javascript">        $(document).ready(function(){            $("#summary").weiboInputBox({                counter:"counter",                max:20,                textClass:"normal",                normalClass:"text",                errorClass:"error"            });        });</script></BODY></HTML>

0 0