`
suxing
  • 浏览: 209101 次
  • 性别: Icon_minigender_1
  • 来自: 遵义
社区版块
存档分类
最新评论

文本框字数提示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();

分享到:
评论

相关推荐

    jQuery做的文本框字数统计/限制插件

    而JavaScript部分则包含了jQuery插件的主要逻辑,包括事件绑定、字数计算和限制逻辑。 为了使用这个插件,开发者需要在自己的项目中引入jQuery库以及这个插件的JavaScript文件,并在适当的地方调用插件方法,指定...

    文本框的字数限制功能jquery插件

    后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用效果如下图 代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    jQuery 文本文本框输入字符限制插件.

    "jQuery 文本文本框输入字符限制插件"是一个专门针对这种情况设计的解决方案,它模仿了 Twitter 的输入限制功能,为用户提供了一种友好的提示方式,避免了简单地阻止用户输入,而是以一种优雅的方式告知用户剩余可...

    jQuery计算文本框可输入字数代码.zip

    这个简单的jQuery插件可以轻松集成到任何项目中,提供实时的字数统计功能,帮助用户更好地控制他们的输入,提高网站的可用性和用户体验。通过调整`maxLength`和样式,你可以根据实际需求自定义字数限制和视觉反馈。...

    基于RectJS的文本框字数限制提示动画

    今天我们要给大家介绍一款比较实用的网页文本框工具,这个文本框的特点是输入文字时可以实时提示当前文本字数的限制,不仅在右下...这款文本框字数限制动画基于RectJS和animate.css动画库,引用脚本库后实现非常简单。

    jQuery 文本框字符限制插件 Textarea

    源代码通常分为两部分:一部分是jQuery插件的核心代码,另一部分是用于演示和测试的HTML页面。开发者可以通过阅读源码学习插件的工作原理,然后在自己的项目中引用和应用。 至于“给力技术.url”,这通常是一个快捷...

    jQuery文本框字符限制插件-TextArea Counter.pdf

    本文将详细介绍一个基于jQuery的文本框字符限制插件,该插件能够有效地控制文本框的最大输入字符长度,并提供友好的提示信息。 1. 插件功能概述: - 最大输入字符限制:用户可以自定义文本框的最大输入字符数,...

    jQuery textarea文本框输入文字字数限制提示代码.zip

    本资源"jQuery textarea文本框输入文字字数限制提示代码.zip"提供了一种实用的方法,用于限制用户在textarea文本框中输入的字符数,并在达到预设限制时给出提示。下面我们将详细探讨相关的jQuery知识点。 首先,`...

    jQuery文本框输入文字计数显示代码.zip

    3. **jquery.charactercounter.js**:这是一个jQuery插件,专门用于实现字符计数功能。它会监听文本框的变化,当用户输入或删除字符时,该插件会动态更新显示的剩余字符数。这通常会以某种形式(如提示文字或进度条...

    jQuery 类twitter的文本字数限制带提示效果插件

    **jQuery 类Twitter文本字数限制带提示效果插件详解** 在网页交互设计中,为了提供良好的用户体验,常常需要对用户输入的文本进行字数限制,例如社交媒体平台中的推文功能。`jQuery` 提供了一个类似 Twitter 的文本...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...

    jQuery maxlength文本字数限制插件

    jQuery maxlength插件用于在网页中实现文本字段(如文本框和文本区域)的字数限制。该插件提供即时的字符数反馈,类似于Twitter等微博客平台上的功能。当用户输入时,字符数会被实时计算,并显示剩余可用的字符数。 ...

    JQUERA限制字数

    这些插件能够帮助开发者轻松实现对文本框、段落等元素内的字符数进行实时监控和限制,当达到预设的最大字符数时,可以阻止进一步输入或者显示提示信息。通过这样的功能,可以确保网页内容不会过于冗长,保持页面的...

    jquery实现微博文字输入框 输入时显示输入字数 效果实现

    示例中引用了两个版本的jQuery库文件,分别为1.7.1版本和一个名为jquery.tools.min.js的插件。尽管文档并未明确指出jquery.tools.min.js的作用,但从常见的命名和使用场景来判断,它可能是一个用于增强某些基础功能...

    jquery maxlength使用说明

    jquery.maxlength.js是一个简洁的jQuery插件,它提供了一种便捷的方式来提示用户输入长度,并可以设置当输入超出限定字符数时如何显示提示信息或进行其他处理。 首先,需要了解的是jquery.maxlength插件可以工作在...

    pro-admin:靴子-管理员-ace

    pro-admin ###selecet下拉框美化...###文本框字数限制提示插件 [removed][removed] ###字符输入格式化的jQuery插件 [removed][removed] ###浏览器滚屏插件 [removed][removed] ###颜色选择器 &lt;script src="assets

    剩余字数统计插件

    【剩余字数统计插件】是一种实用的网页交互功能,主要应用于留言板或个人简介等需要限制输入字符数的场景。这种插件的核心功能是实时显示用户输入内容的剩余字符数,并且通常会设定一个最大字符数限制,以帮助用户在...

    JQuery 表单中textarea字数限制实现代码

    此外,JQuery还包含了对CSS、属性、尺寸和位置操作的支持,以及提供了一个使用插件和扩展的途径。 知识点二:HTML表单元素textarea 在HTML表单中,textarea是一个用于文本输入的多行文本框控件。用户可以在其中输入...

    jQuery实现一组粉色系的常用网页控件

    如果功能较为复杂,我们可以将代码封装成jQuery插件,方便复用和维护。例如,我们可以创建一个名为`pinkControls.js`的插件,包含所有粉色系控件的样式和行为。 7. **Ajax交互**: 在实现某些功能时,我们可能...

Global site tag (gtag.js) - Google Analytics