写了一个在文本框右上角显示已输入字数的插件,我写的第二个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插件
文本框插入类似QQ,微博表情的Jquery插件
自己用jQuery做的文本框字数统计/限制插件,可以设定最高字数,设计按字或字节统计,显示剩余字数
删除文本框内容的实用jquery插件addclear.zip 删除文本框内容的实用jquery插件addclear.zip 删除文本框内容的实用jquery插件addclear.zip
自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息自动在文本框提示信息 jquery
当页面打开时,给input[text] 文本框 先设定初始值, 当其获得焦点时,文字消失;当其失去焦点时,再次附上原来的值;当文本内容改变时,无论是否获得焦点,文本内容都不在改变。
jQuery计算文本框可输入字数代码基于jquery-2.2.3.min.js制作,动态计算文本框可输入字数统计。
后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用效果如下图 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
JavaScript文本框提示插件placeholder
jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载
jQuery Spin button 文本框数值自动增减插件 jQuery Spin button 文本框数值自动增减插件
Jquery实现仿搜索引擎文本框自动补全插件 包中含有:jquery-1.7.2.min.js,关键类库:jquery.bigautocomplete.js,应用于百度搜索自动提示内容.
文本框输入内容,出现相关提示。js源码插件,可以通过上下切换,enter键确认
Jquery文本框插入表情插件
jquery 文本框 自动补全 ajax autocomplete 完整实例
jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成...