直播带货源码，评论框自动控制高度
HTML
<div class="cont_comment_cont">
<div id="textareaHeight">
<textarea id="textarea" placeholder="在此输入评论内容~"></textarea>
</div>
<div>发布</div>
</div>
CSS
/* textarea配置 */
textarea {
padding: 0;
margin: 0;
list-style: none
}
textarea::-webkit-input-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder {
color: #CFD0D1 !important;
}
/* 整体控制 */
.cont_comment_cont {
display: flex;
justify-content: center;
align-items: flex-start;
}
/* 评论框样式 */
.cont_comment_cont>div:nth-child(1) {
padding: 20px 16px 20px 20px;
width: 698px;
height: 25px;
border-radius: 5px;
border: 0;
}
/* 富文本框样式 */
.cont_comment_cont textarea {
width: 702px;
height: 100%;
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
line-height: 25px;
color: #050E26;
border-radius: 5px;
resize: none;
border: 0;
background-color: #F0F3F5;
outline: none;
overflow-y: hidden;
}
/* 按钮样式 */
.cont_comment_cont>div:nth-child(2) {
width: 126px;
height: 65px;
background: rgba(80, 94, 255, 1);
border-radius: 5px;
background-color: #505EFF;
font-size: 20px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 65px;
margin-left: 20px;
}
JavaScript
// 调整评论高度
let textareaHeight = document.querySelector('#textareaHeight')
let textarea = document.querySelector('#textarea')
textarea.addEventListener('input', function (e) {
textareaHeight.style.height = '25px'
if (e.target.scrollHeight > 25) {
textareaHeight.style.height = '52px'
} else {
textareaHeight.style.height = '25px'
}
})
以上就是 直播带货源码，评论框自动控制高度，更多内容欢迎关注之后的文章