文本框字数提示jquery插件

写了一个在文本框右上角显示已输入字数的插件,我写的第二个jquery插件,总算是有点实用价值。

/**
*WordCount 1.0
*Author: Xing Su
*E-mail: suxing.sir@gmail.com
**/
(function($) {
   $.fn.WordCount = function(options) {
      var opts = $.extend({}, $.fn.WordCount.defaults, options);
	  var temp=$('#'+opts.ID);
	  var getlen=function($this){
	     return $this.val().length;
	  }
	  var showlen=function($this,obj){
		  obj.text(getlen($this)+'/'+opts.MaxWord);
		  var color;
		  if(getlen($this)>opts.MaxWord){
		     color=opts.Color2;
	          }else{
		     color=opts.Color;
		  }
		  obj.css('color',color);
	  }
	  if(temp.length==0){
	     temp=$('<div id="'+opts.ID+'"></div>');
		 temp.css({position:'absolute',display:'none'});
		 temp.css({width:opts.Width,height:opts.Height,color:opts.Color,'text-align':opts.textAlign});
		 $(document.body).append(temp);
	  }
	  return this.each(function(){
	     $(this).focus(function(){
	  	    var left=Math.floor($(this).outerWidth()+$(this).offset().left-opts.Width+opts.offsetLeft);
    		var top=Math.floor($(this).offset().top-opts.Height+opts.offsetTop);
            temp.css({top:top,left:left}).text(getlen($(this))+'/'+opts.MaxWord).fadeIn('fast');
		 });
		 
		 $(this).blur(function(){
		    temp.fadeOut('fast');
		 });
		 
		 $(this).keyup(function(){
		    showlen($(this),temp);
		 });
		 
		 $(this).keydown(function(){
		    showlen($(this),temp);						  
		 });		 
	  });
   }

   $.fn.WordCount.defaults = {
      Width:70,
	  Height:15,
	  MaxWord:1024,
	  ID:'wordcount',
	  Color:'#FFFFFF',
	  Color2:'#FF0000',
	  offsetTop:0,
	  offsetLeft:0,
	  textAlign:'right'
   }

})(jQuery);

 使用也简单:

$('textarea').WordCount();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值