本文主要是介绍微博输入框插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
/*** 微博计数输入框插件* 属性说明：* counter 计数区的容器id* max 最大字符数，默认值为150* textClass 指定文字的样式* normalClass 指定未超过最大字数时数字样式* errorClass 指定已超过最大字数时数字样式* 2012/3/8 by 崔玥*/
(function($){$.fn.extend({weiboInputBox: function(options) { //插件名字var defaults={counter:"msg", //计数容器idmax: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>这篇关于微博输入框插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
