700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > php多行文本框代码 1分钟实现多行文本框[textarea]自动高度jquery 插件

php多行文本框代码 1分钟实现多行文本框[textarea]自动高度jquery 插件

时间:2019-07-14 21:06:57

相关推荐

php多行文本框代码 1分钟实现多行文本框[textarea]自动高度jquery 插件

支持初始化加载textarea高度

支持复制文字自动高度

支持长段不换行文字

支持连续回车和连续删除自动高度

内容

$.extend({

textareaAutosize_dc:function(){

varautoSizeFn=function(){}

autoSizeFn.prototype={

autosize:function(){

varfontsize=$(this).css("font-size").replace("px","");//文字大小

varfontrowcount=($(this).width()/fontsize);//每行文字个数

vartextArray=$(this).val().split("\n");

varcurrentEnterCount=textArray.length;//获取行数

$(textArray).each(function(){

//检查每行文字量是否超过行容量如果超过贼需要加行,超几行加几行

if(this.length>fontrowcount){

currentEnterCount+=this.length/fontrowcount;

}

});

varlineHeight=Number($(this).css("line-height").replace("px",""));

$(this).height(lineHeight*(currentEnterCount+1));

},addEvent:function(){

//注册事件监听

varself=this;

$("textarea").on("keyup",function(e){

self.autosize.call(this);

});

},initAllHeight:function(){

//初始化所有高度

varself=this;

$("textarea").each(function(){

self.autosize.call(this);

});

}

,init:function(){

this.addEvent();

this.initAllHeight();

}

}

newautoSizeFn().init();

}

}).fn.extend({

textareaAutosize_dc:function(){

vardomSelf=this;

varautoSizeFn=function(domSelf){

this.domSelf=domSelf;

}

autoSizeFn.prototype={

autosize:function(){

varfontsize=$(this).css("font-size").replace("px","");//文字大小

varfontrowcount=($(this).width()/fontsize);//每行文字个数

vartextArray=$(this).val().split("\n");

varcurrentEnterCount=textArray.length;//获取行数

$(textArray).each(function(){

//检查每行文字量是否超过行容量如果超过贼需要加行,超几行加几行

if(this.length>fontrowcount){

currentEnterCount+=this.length/fontrowcount;

}

});

varlineHeight=Number($(this).css("line-height").replace("px",""));

$(this).height(lineHeight*(currentEnterCount+1));

},addEvent:function(){

//注册事件监听

varself=this;

$(this.domSelf).on("keyup",function(e){

self.autosize.call(this);

});

},initHeight:function(){

varself=this;

//初始化所有高度

$(this.domSelf).each(function(){

self.autosize.call(this);

});

}

,init:function(){

this.addEvent();

this.initHeight();

}

}

newautoSizeFn(domSelf).init();

}

});

//调用自动高度

//$.textareaAutosize_dc();//应用到所有textarea中

$('textarea').textareaAutosize_dc();//应用到指定的textarea中

原理:其实就是 文本框高度=行高*(换行数+1)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。