直播带货源码，评论框自动控制高度

HTML

<div class="cont_comment_cont"><br>    <div id="textareaHeight"><br>        <textarea id="textarea" placeholder="在此输入评论内容~"></textarea><br>    </div><br>    <div>发布</div><br></div><br> 

CSS

/* textarea配置 */<br>textarea {<br>    padding: 0;<br>    margin: 0;<br>    list-style: none<br>}<br>textarea::-webkit-input-placeholder,<br>textarea:-moz-placeholder,<br>textarea::-moz-placeholder,<br>textarea:-ms-input-placeholder {<br>    color: #CFD0D1 !important;<br>}<br>/* 整体控制 */<br>.cont_comment_cont {<br>    display: flex;<br>    justify-content: center;<br>    align-items: flex-start;<br>}<br>/* 评论框样式 */<br>.cont_comment_cont>div:nth-child(1) {<br>    padding: 20px 16px 20px 20px;<br>    width: 698px;<br>    height: 25px;<br>    border-radius: 5px;<br>    border: 0;<br>    <br>}<br>/* 富文本框样式 */<br>.cont_comment_cont textarea {<br>    width: 702px;<br>    height: 100%;<br>    font-size: 18px;<br>    font-family: PingFang SC;<br>    font-weight: 400;<br>    line-height: 25px;<br>    color: #050E26;<br>    border-radius: 5px;<br>    resize: none;<br>    border: 0;<br>    background-color: #F0F3F5;<br>    outline: none;<br>    overflow-y: hidden;<br>}<br>/* 按钮样式 */<br>.cont_comment_cont>div:nth-child(2) {<br>    width: 126px;<br>    height: 65px;<br>    background: rgba(80, 94, 255, 1);<br>    border-radius: 5px;<br>    background-color: #505EFF;<br>    font-size: 20px;<br>    font-family: PingFang SC;<br>    font-weight: 500;<br>    color: #FFFFFF;<br>    text-align: center;<br>    line-height: 65px;<br>    margin-left: 20px;<br>}<br> 

JavaScript

// 调整评论高度<br>let textareaHeight = document.querySelector('#textareaHeight')<br>let textarea = document.querySelector('#textarea')<br>textarea.addEventListener('input', function (e) {<br>    textareaHeight.style.height = '25px'<br>    if (e.target.scrollHeight > 25) {<br>        textareaHeight.style.height = '52px'<br>    } else {<br>        textareaHeight.style.height = '25px'<br>    }<br>})

以上就是直播带货源码，评论框自动控制高度，更多内容欢迎关注之后的文章