实现文本框高度自适应的两种方法

时间:2024-04-16 22:42:29

需求:做一个文本框需要让文本框有一个默认的最小高度,当书写的文字到文本框的最底端的时候可以让文本框自动撑开。

第一种方法通过js来实现的:

html部分:<textarea name=""  class="disvertop describe-texa" autoHeight="true"></textarea>

cssl部分: .describe-texa{padding:10px; outline: none; resize:none;width:616px; min-height:80px;border:1px solid #e8e8e8;}

js部分(需要引入jquery插件):

<script>
$.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);
});
});

}
$(\'textarea[autoHeight]\').autoHeight();
</script>

第二种方法简单有效通过html/css实现:

html代码:<div class="blockcontent" contenteditable="true"></div>  

css代码:.blockcontent{width:500px; min-height:100px; border:1px solid #ccc;margin:100px auto;padding:10px;}

效果图默认:

效果图输入字体后:

 

相关文章