类微博输入框插件

最新推荐文章于 2025-08-20 12:55:49 发布

最新推荐文章于 2025-08-20 12:55:49 发布 · 201 阅读

文章标签：

#jquery #ViewUI

jQuery 专栏收录该内容

3 篇文章

订阅专栏

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