textarea高度随文本内容变化，且不出现滚动条

最新推荐文章于 2021-06-29 21:05:00 发布

码农阿华

最新推荐文章于 2021-06-29 21:05:00 发布

阅读量549

点赞数

分类专栏：知识分享代码实例 JavaScript 文章标签： Html CSS JavaScript

本文链接：https://blog.csdn.net/qq_35144624/article/details/101676194

版权

代码实例同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

知识分享

5 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

Html代码部分：

<div class= "con-info order-info-con1 ">
    <p class="con-tit con-se-tit con-tit-items">备注: </p>
        <div class="con-msg order-comment-div">
            <textarea class="comment-textarea" rows="" cols="" th:text="${cretInfo.cComment}" disabled="disabled"></textarea>
        </div>
 </div>

Css代码部分：

.info-textarea {
        border: 0px;
        background-color: white;
        width: 514px;
        height: 125px;
        resize: none;
        text-indent: 25px;
}

JavaScript代码部分：

//textarea高度随文本内容变化，且不出现滚动条
$('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});