/** * 微博计数输入框插件 * 属性说明: * 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>