欢迎到访爱收集博客,喜欢就Ctrl+D收藏吧!

点击登录
  • 欢迎访问网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站

textarea 随文字变多增加高度

记录 qaqcn 115次浏览 0个评论

效果 后面转换gif的
20180503090803100
Jquery 代码

$.fn.autoHeight = function(){	
		function autoHeight(elem){
			elem.style.height = 'auto';
			elem.scrollTop = 0; //防抖动
			elem.style.height = elem.scrollHeight + 'px';
			
		}
		
		this.each(function(){
			autoHeight(this);
			$(this).on('keyup', function(){
				autoHeight(this);
			});
		});
};
使用
$(function(){
			$(".talk_word").autoHeight();
});
输入框变高上面内容也变高talk_word是输入框 talk_show上方内容div
             var hei = 42; //默认高度最低的高度
             $(".talk_word").on('keyup', function(){
            	 if(hei == $(".talk_word").height()){
            		 
            	 }else{
            		 $(".talk_show").css("height",$(".talk_show").height()-$(".talk_word").height()+hei+"px");
            		 hei = $(".talk_word").height();
            		 var scrollHeight = $('.talk_show').prop("scrollHeight");
            		   $('.talk_show').animate({scrollTop:scrollHeight}, 100);
            	 }
			});

爱收集 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明textarea 随文字变多增加高度
喜欢 (0)
支付宝[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址