1 /** 2 * 微博计数输入框插件 3 * 属性说明： 4 * counter 计数区的容器id 5 * max 最大字符数，默认值为150 6 * textClass 指定文字的样式 7 * normalClass 指定未超过最大字数时数字样式 8 * errorClass 指定已超过最大字数时数字样式 9 * 2012/3/8 by 崔玥 10 */ 11 (function($){ 12 $.fn.extend({ 13 weiboInputBox: function(options) { //插件名字 14 var defaults={ 15 counter:"msg", //计数容器id 16 max:150, 17 textClass:"textClass", 18 normalClass:"normalClass", 19 errorClass:"errorClass" 20 }; 21 var options=$.extend(defaults,options); 22 return this.each(function() { 23 var o=options; //得到配置参数 24 var obj=$(this); //得到当前对象 25 $("#"+o.counter).addClass(o.textClass) 26 .html("您可以输入<span class='"+o.normalClass+"'>"+o.max+"</span>字"); 27 obj.bind("keypress",function(event){ 28 var l=obj.val().length+1; 29 var maxlength=obj.attr("maxlength"); 30 if(l>maxlength){ 31 window.event.keyCode=0; 32 } 33 }); 34 obj.bind("keyup change",function(event){ 35 var val=obj.val(); 36 var vLength=val.length; 37 //var addLen=(val.match(/[^\x00-\xff]|[\u4E00-\u9FA5]/g)||'').length; //2个英文字符计为1个 38 var addLen=val.length; //1个英文字符计为1个 39 var num=o.max-Math.ceil((vLength+addLen)/2); 40 41 if(num>=0){ 42 $("#"+o.counter).addClass(o.textClass) 43 .html("您可以输入<span class='"+o.normalClass+"'>"+num+"</span>字"); 44 }else{ 45 $("#"+o.counter).addClass(o.textClass) 46 .html("已超过<span class='"+o.errorClass+"'>"+Math.abs(num)+"</span>字"); 47 } 48 }); 49 }); 50 } 51 }); 52 })(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>
